React + React-Routerアプリでの状態をどこに保存するのですか？

Question

私はReact-Routerを使用していますが、コンポーネントの状態が変わってもコンポーネントの更新が行われている状態で、コンポーネントの外部に状態を維持する方法がわかりません。私は、ルート内のコンポーネントにプロパティを渡している：

class Index extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {foo: this.props.route.foo} 
    } 
} 

var bar = 'bla' 

var routes = (
    <Route path="/" foo=bar component={Index}/> 
); 

私のルートは、上記の例でbarは私のコンポーネントを更新しません（またそれが再描画ん）更新ので、部品の外で定義されています。これを解決するために受け入れられる方法は何ですか？

Answer 1

componentWillReceivePropsを使用できます。このメソッドは、そのコンポーネントに新しいpropsを渡すと呼び出されます。これを使用して、新しい小道具を受け取ったときに新しいstateを設定します。

次のように動作するはずです。

class Index extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = {foo: this.props.route.foo} 
    } 
    componentWillReceiveProps(nextProps) { 
    this.setState({ 
     foo: nextProps.route.foo, 
    }) 
    } 
} 

var bar = 'bla' 

var routes = (
    <Route path="/" foo={bar} component={Index}/> 
);