なぜ反応成分をカレー化できないのですか？

Question

私はreact-reduxを使い始める前に、フロントエンドでオブジェクトを更新する必要があるバックエンドサービスから取得する多くのオブジェクトを使用するアプリケーションのフロントエンドコードを単純化する非常に興味深い方法を見つけましたほぼリアルタイムで

コンテナクラスを使用すると、監視が自動化されます（変更時にストア内のオブジェクトが更新されます）。ここでは例です：

：できるだけシンプルかつ明確に分離してアプリケーションの残りの部分を供給しようとして

const MethodListContainer = React.createClass({ 
    render(){ 
    return <MethodList {...this.props} />}, 

    componentDidMount(){ 
    this.fetchAndWatch('/list/method')}, 
    componentWillUnmount(){ 
    if (isFunction(this._unwatch)) this._unwatch()}, 

    fetchAndWatch(oId){ 
    this.props.fetchObject(oId).then((obj) => { 
     this._unwatch = this.props.watchObject(oId); 
     return obj})}}); 

、私は自動的ので、適当な容器を供給するだろう代替「接続」を供給しようとしました

const connect = (mapStateToProps, watchObjectId) => (component) => { 
    const ContainerComponent = React.createClass({ 
    render(){ 
     return <component {...this.props} /> 
    }, 

    componentDidMount(){ 
     this.fetchAndWatch()}, 
    componentWillUnmount(){ 
     if (isFunction(this._unwatch)) this._unwatch()}, 

    fetchAndWatch(){ 
     this.props.fetchObject(watchObjectId).then((obj) => { 
     this._unwatch = this.props.watchObject(watchObjectId); 
     return obj})} 
    }); 
    return reduxConnect(mapStateToProps, actions)(ContainerComponent) 
}; 

これは次いで、このように使用されている：

module.exportsは=接続（mapStateToProps、 '/リスト/メソッド'）（MethodList）

を但し、componentはレンダリングされません。 componentがインスタンス化またはレンダリングされない点を除いて、コンテナがレンダリングされます。 componentは、パラメータとして渡して代わりに直接参照しないと、期待通りにレンダリング（および更新）します。

エラーまたは警告は生成されません。

私は間違っていますか？

Answer 1

componentパラメータに異なる変数名を使用してください。

const connect = (mapStateToProps, watchObjectId) => (MyComponent) => { 
    const ContainerComponent = React.createClass({ 
    render() { 
     return <MyComponent {...this.props} obj={this.state.obj} /> 
    } 
    ... 
    fetchAndWatch() { 
     fetchObject(watchObjectId).then(obj => { 
     this._unwatch = watchObject(watchObjectId); 
     this.setState({obj}); 
     }) 
    } 
    }); 
    ... 
} 

私は、コンポーネントが下部ケース（<component {...this.props} />）であるため、問題があるかもしれないと思います。 JSXは、小文字の要素をDOM要素として扱い、React要素として大文字にします。

編集：

あなたがobjデータにアクセスする必要がある場合は、コンポーネントの小道具としてそれを渡す必要があります。 connect_obj.jsで

：コードスニペット

Answer 2

を更新しました。これは私の回避策は、エラーの説明ではなく、ある

"use strict"; 
import React from 'react'; 
import {connect} from 'react-redux'; 

import {actions} from 'redux/main'; 
import {gets} from 'redux/main'; 
import {isFunction, omit} from 'lodash'; 

/* 
A connected wrapper that expects an oId property for an object it can get in the store. 
It fetches the object and places it on the 'obj' property for its children (this prop will start as null 
because the fetch is async). It also ensures that the object is watched while the children are mounted. 
*/ 

const mapStateToProps = (state, ownProps) => ({obj: gets.getObject(state, ownProps.oId)}); 

function connectObj(Wrapped){ 
    const HOC = React.createClass({ 
    render(){ 
     return <Wrapped {...this.props} /> 
    }, 

    componentDidMount(){ 
     this.fetchAndWatch()}, 
    componentWillUnmount(){ 
     if (isFunction(this._unwatch)) this._unwatch()}, 

    fetchAndWatch(){ 
     const {fetchObject, watchObject, oId} = this.props; 
     fetchObject(oId).then((obj) => { 
     this._unwatch = watchObject(oId); 
     return obj})}}); 
    return connect(mapStateToProps, actions)(HOC)} 

export default connectObj; 

は、その後、私はどこでもので、それを使用することができます：

"use strict"; 
import React from 'react'; 

import connectObj from 'redux/connect_obj'; 

const Method = connectObj(React.createClass({ 
    render(){ 
    const {obj, oId} = this.props; 
    return (obj) ? <p>{obj.id}: {obj.name}/{obj.function}</p> : <p>Fetching {oId}</p>}})); 

だから、connectObjは、objecを見る/見逃すコンテナコンポーネントと明示的に接続を設定するためのプロジェクト全体の置き換えを作成するという私の目標を達成するts。これは非常に多くのボイラープレートを節約し、時間の経過と共に（サービスからの更新によって）変化する可能性のあるオブジェクトを提示するだけの仕事をするコンポーネントへの店舗のセットアップと接続を維持する単一の場所を提供します。

私の最初の試行がうまくいかず、この回避策が他の州の小道具を注入するのをサポートしていないのはまだ分かりません（すべてのアクションが利用可能なので、ディスパッチについて心配する必要はありません）。