静的コンポーネントを作成してReactで共有する方法は？

Question

私は単一のコンポーネントを作成し、それを別のコンポーネントに含めることができます。静的コンポーネントが更新されると、それが含まれるすべてのコンポーネントを更新する必要があります。これはどのように行うのですか？あなたのコード例で

var ActiveTag = React.createClass({ 
    getInitialState() { return {tag: ''}, 
    render() { return <span>{this.state.tag}</span> }} 
}); 

var PanelTitle = React.createClass({ render() { return <ActiveTag/> } }) 
var DocumentTitle = React.createClass({ render() { return <ActiveTag/> } }) 

ActiveTag.setState({tag: 'shared tag'}) // Both PanelTitle and DocumentTitle should update 

Answer 1

、次の行では動作しません。

ActiveTag.setState({tag: 'shared tag'}) // Both PanelTitle and DocumentTitle should update 

あなたは/コンポーネント外部から状態にアクセスべきではないことはできません。状態の背後にある考え方の全体は、コンポーネントの内部にあるということです。実際には、コンポーネント自体の中からsetState()を使用するだけです。あなたのコンポーネントツリー内の別の場所で使用されている

• を（コンポーネントが明らかに更新することができますので）あなたは非静的情報と標準コンポーネント
• を持って
• ：

  私が正しく理解していれば

コンポーネントには、propsまたはstateが必要です（それ以外の場合は更新されません）。

あなたは2通りの方法でこれを実装することができます小道具を使用して

1： は（おそらくルートコンポーネントを反応させる）、コンポーネント・ツリーの最上位レベルでカスタム・コンポーネントの小道具を保存/定義し、それらを渡しますあなたのコンポーネントツリー内のすべての子に小道具を送ります。
このように、プロップが更新されるたびに、反応してツリー全体を再描画し、カスタムコンポーネントのすべてのインスタンスを同時に更新します。

（擬似コードで）だろう小道具を使った例：

var ActiveTag = React.createClass({ 
    render() { return <span>{this.props.tag}</span> } 
}); 

var PanelTitle = React.createClass({ 
    render() { return <ActiveTag tag={this.props.tag}/> } 
}) 
var DocumentTitle = React.createClass({ 
    render() { return <ActiveTag tag={this.props.tag}/> } 
}) 

var ReactRoot = React.createClass({ 
    getInitialState() {return { globalTag : 'initial value' }}, 
    componentDidMount() { this.setState({ globalTag: 'new value' }) }, 
    render() { 
    return (
     <PanelTitle tag={this.state.globalTag} /> 
     <DocumentTitle tag={this.state.globalTag} /> 
    } 
}) 

2.状態を使用する： ストア（多分フラックス店で）どこかのカスタム・コンポーネント更新可能なもの。
カスタムコンポーネントで状態を実装し、ストアに対する変更にイベントリスナーを追加します。
このように、ストア内の更新可能なもの（またはどこでも）が変更されるたびに、各カスタムコンポーネントのリスナーが起動し、状態が更新され、カスタムコンポーネントが再レンダリングされます。最高の