2016-09-09 9 views
0

私はリアクションを学んでいて、私はちょっと立ち往生しています。ここに私のJSONオブジェクトとその状態を移入するために使用して属性イムで追加の親コンポーネントです:REACT - 親の状態を取得して子に渡す

私のアプリのための機能をレンダリングするには
var App = React.createClass({ 
    getInitialState: function() { 
     return { 
      clothing:{}, 
      order:{} 
     } 
    }, 
    loadClothingItems: function(){ 
     this.setState({clothing:clothing}); 
    }, 
}); 

私はそうのようなloadClothingItems用アプリ小道具を伝承しています:

<OtherOptions loadClothingItems={this.loadClothingItems} /> 

ここに子コンポーネント(OtherOptions)があります。 onClickがApp状態を生成するaタグがあります。私が最初に私はコンソールを取得するアプリをロードすると

var OtherOptions = React.createClass({ 
    render:function(){ 
     return (
      <div className="other-options-inner"> 
     <a onClick={this.props.loadClothingItems}>Load Clothing</a> 
       <ul> 
        {console.log(this.props.state)} 
       </ul> 
       </div> 
     ) 
    } 
}); 

:私は、UL内のli項目にすべての私のオブジェクトキーのプロパティを生成するために戻ってダウンotheroptionsにすることをアプリに追加されている状態を取得する必要があります私がまだAppコンポーネントの状態を設定していないので期待される "undefined"のログですが、aタグをクリックすると "undefined again"と表示されます。

私はAppの新しい状態がここでOtherOptionsに渡されることを期待していたので、状態をとっていくつかのliアイテムをレンダリングすることができました。たぶん私は親とのやりとりに正しい方法を取っていないかもしれませんが、私は完全にオフトラックですが、私が立ち往生していてドキュメントが役に立たなかったかのどちらかです。

おかげ

+0

あなたの 'OtherOptions'コンポーネントで、' this.props.state'にアクセスしようとしています。 ''をレンダリングすると、 'state'という小道具を渡していますか? –

+0

いいえ、私はAppの状態を保留しようとしています。再び私は初心者ですので、私はここでうまくいくでしょう! –

答えて

0

あなたは、あなたがまたthis.props.items

経由小道具<OtherOptions items={this.state} loadClothingItems={this.loadClothingItems} /> と子コンポーネントでのアクセスを介して、そうすることができる子コンポーネントの状態のすべてを渡す必要がある場合は、私はないんだけどあなたはloadClothingItemsで達成しようとしているものは確かだが、clothingはどこにも存在しないので、衣服にclothingの状態を設定しようとすると定義されません。

+0

それはありがとう、エリック!申し訳ありませんが、衣料品の変数がJSONファイルにありました。状態を子コンポーネントに渡したい場合、毎回これを行う必要がありますか?これはベストプラクティスではありませんか? –

+1

アプリケーションに大量のデータがある場合は、状態管理に役立つReduxの実装方法を検討します。また、すべての状態が必要でない場合は、子コンポーネントに状態全体を渡す必要はありません。たとえば、衣服の状態を子に渡すだけでよい場合は、 'clothing = {this.state.clothing}'を渡します。 – erichardson30

関連する問題