Reactのコンポーネントを外部から参照しますか？

Question

これは愚かな質問のように思えるかもしれませんが、これが可能であれば（好きなら）好奇心が強いです。次のことを考えてみましょう：

export default class Example extends Component { 

    constructor(props){ 
    super(props); 

    this._variable = value; 
    } 

    render() { 
    return (<div>{this.props.children}</div>); 
    } 
} 

今、私は私がそのようなことを子どもたちにまでthis._variableを渡すことができます知っている：

this._childrenWithProps = React.Children.map(this.props.children, 
    (child) => React.cloneElement(child, { 
     variable: this._variable, 
    }) 
); 

は今、これまで子供がthis.props.variableへのアクセス権を持っています。

// In another component some where ... 
render() { 
    // reference variable (this._variable, or variable) here 

    <Example> 
    // Children here ... 
    </Example> 
} 

はこの何コンテキストが使用されている。しかし、私はできるようにするにはsimmilarコンテキストか何かを使用することができます（と私は完全にこの概念を理解しませんか）？あるいは、私はひどく間違ったことをしていますか？本質的に私はこれを参照したいと考えています。要素の外側に変数がありますが、要素内にそれを設定します。それは可能ですか？

Answer 1

はい、コンテキストを使用してコンポーネントのすべての子孫に変数を渡すことができますが、大文字のルールとしては絶対に必要でない場合はコンテキストを使用しないでください。コンテキストは、Reactのデータフローパターンを分割し、一般的に、コードが明示的ではなく暗黙的である可能性があるため、コードを読みにくくします。ドキュメントに従う：

コンテキストを使用すると、データフローがあまり明確にならないため、コードを理解しにくくなります。グローバル変数を使用してアプリケーションに状態を渡すのと同様です。

一般に、コンテキストはテーマ情報などに最適です。また、特定のルーティングライブラリでも便利です。通常、データを渡すより良い方法があります（React.ChildrenのcloneElementの例は完璧です）、多くのReactプロジェクトでよく見かけるコードがあります。

あなたはまだその警告後にコンテキストを使用する場合は、はコンテキスト（通常はラッパー）を提供するコンポーネントとはコンテキストを受け取ることを（S）成分へのいくつかの調整をする必要があります。

コンテキストプロバイダには、すべての子に利用可能にしたいコンテキストオブジェクトを返すgetChildContext関数が必要です。また、childContextTypesがクラスのプロパティとして宣言する必要があります。あなたがにしたい子として渡されるコンポーネントはコンテキストを受け取る定めるどこ

class Example extends Component { 

    getChildContext() { 
    return { variable: 'foo' }; 
    } 

    render() { 
    return (<div>{this.props.children}</div>); 
    } 
} 

Example.childContextTypes = { 
    variable: React.PropTypes.string 
}; 

その後、あなたは同じchildContextTypesプロパティを追加する必要があります。それはthis.contextオブジェクトを介してコンテキストにアクセスします。 childContextTypesを書く

class Child extends Component { 

    render() { 
    return (<div>{this.context.variable}</div>); 
    } 
} 

Child.childContextTypes = { 
    variable: React.PropTypes.string 
}; 

は必要です。ご覧のとおり、コンテキストを使用しても必ずしもコードが少なくなるわけではありません。