それが通過しても大丈夫です `

Question

TL render（）メソッドでthis`; DR

これは大丈夫ですか？

class SideMenu extends React.Component { 

    render() { 
    // note passing this 
    return 
     <MenuGroup menu={this}/> 
    } 
} 

class MenuGroup extends React.Component { 

    handleClick() { 
    this.props.menu.setState({ some: "thing" }) 
    } 

    render() { 
    ... 
    } 
} 

背景

私はReactJSを使用して（SB-adminの内の1つのような）のサイドメニューを構築しようとしています。 ReactJSを使用する方法を学ぶためにこれをやっています。

これを行うには2つのアプローチが考えられますが、Context docsではそれを使用しないように十分警告しています今のところ特に実験的API部分。

とにかく私は構成要素の束を作っていましたが、現時点では実際の階層はありませんでした（コンテキストを実行していない場合は必要ないため）。しかし、私はメニューの現在の状態を保存し、私にそれを更新させるオブジェクトを渡す必要がありました。

私がやったことが大丈夫だったのか、それとも良くなるのか、避けなければならないのでしょうか。

Answer 1

コンポーネントが複雑すぎる場合は、mobxまたはreduxのような状態管理ツールを使用することをお勧めします。子コンポーネントにthisを渡すことは、反応one-way flowの原則に違反することをお勧めしません。あなたはこのを探している可能性があり

：この構造は簡単に推論し、リファクタリングのためにあなたをできるようになり、しかも自分の子コンポーネントがある

class SideMenu extends React.Component { 
    constructor(props) { 
    super(props) 
    this.handleMenuChange = this.handleMenuChange.bind(this) 
    } 

    handleMenuChange(value) { this.setState({something: value }) 

    render() { 
    // note passing this 
    return 
     <MenuGroup handleMenuChange={this.handleMenuChange}/> 
    } 
} 

class MenuGroup extends React.Component { 

    handleClick() { 
    this.props.handleMenuChange("thing") 
    } 

    render() { 
    ... 
    } 
} 

： https://facebook.github.io/react/docs/lifting-state-up.html

簡単に言えば、あなたのコードは次のようになります。現在は再利用可能です。