2016-05-28 10 views
1

私は反応15.1.0を使用しています。反応15.1.0、親から子へ全状態を渡す

親「P」コンポーネントがあり、それに子コンポーネント「C」が含まれているとします。

反応の古いバージョンでは、状態全体を子に渡したいときは、{... this.state}を使用し、子コンポーネントから{this.props.something}を使用しました。

最新のReact 15.1.0の上記のインスタンスには簡単な方法がありますか?

注:私はの全部を州に渡す必要があり、個々の小道ではありません。

<div> 
    {React.cloneElement(this.props.children, { title: this.state.title })} 
</div> 

私が期待しているのは以下のようなものです。

<div> 
    {React.cloneElement(this.props.children, {...this.state})} 
</div> 

親コンポーネントには以下のコードがあります。

var App = React.createClass({ 
    getInitialState() { 
     return{ 
      status: 'disconnected', 
      title: 'Hello World' 
     } 
    }, 
    render() { 
     return(
      <div> 
       <Header title={this.state.title} /> 
       <div> 
        {React.cloneElement(this.props.children, this.state)} 
       </div> 
      </div> 
     ); 
    } 
}); 

私は下のコードを使って実験しています。

var Speaker = React.createClass({ 
    render() { 
     return (
      <h1>Speaker: {this.state.title}</h1> 
     ); 
    } 
}); 

しかし、Chromeブラウザでは、私は以下の結果になります。

enter image description here

+0

質問が分かりません。「{... this.state}」に間違っていますか? – azium

+0

最新の反応バージョンではうまくいきません。 –

+0

それは私のために働くhttp://www.webpackbin.com/Nk_ES2MQW上記の例では(JSXを使用しない)、それは特定の反応構文ではありません。あなたはステージ2のレスト/スプレッドプロパティバーベルプリセット – azium

答えて

2
{...this.state} 

この場合

this.state 

に等しいです。 ES6で スプレッド演算子(ないリアクト固有の機能)...一つは、親オブジェクトへのプロパティをオブジェクト展開するには、以下を参照してください。

let sampleObject = { 
    name: 'a_name' 
}; 

console.log('Non-spread', sampleObject); // Non-spread {name: "a_name"} 
console.log('Spread', {... sampleObject}); // Spread {name: "a_name"} 
+0

あなたは私のコードを今読んで、何が欠けているか教えていただけますか? –

0

は、私はちょうど以下のコードを変更し、子コンポーネントで

Speaker: {this.props.title} 

とボイル!コードが機能しました。皆さんありがとう。

以下はスナップショットです。 enter image description here

関連する問題