変更値は、異なるファイル

Question

と反応だから私は、このファイル構造にdesktop.jsxにdesktop.jsx私が必要とindex.jsxで

app/ 
    |- assets/ 
    | |-pages/ 
    | | |-desktop.jsx 
    | | |-mobile.jsx 
    | |-components.jsx 
    |-index.jsx 

を反応させてきた私はcomponents.jsx必要がなく、部品のパーツがあります.jsxは、index.jsxクラスの状態を変更する必要があります。

ので、その次のように：

index.jsx -> desktop.jsx -> components.jsx

ので、私は助けるため

components.jsxのおかげである機能とindex.jsxにクラスの状態を変更するにはどうすればよいです！

Answer 1

リアクションでは、覚えておくべきことは小道具が降りて、イベントはになります。これは、親コンポーネントから子に値を渡すことを意味し、小道具を介して行います。子から親に値を渡すには、イベントを使用します。

あなたの場合、コンポーネントの複数の「レイヤー」があるので、複数のステップで行う必要があります。たとえば：

<Desktop val={this.props.val} /> 

したがって、元の値は、デスクトップ・コンポーネントでアクセスできるようになりました：インデックスコンポーネントrender方法で

<Index val="the value to pass" /> 

どこかで、あなたは次の行を持っています。インデックスコンポーネントと同様に、デスクトップコンポーネントrender方法は、

<Components val={this.props.val} /> 

をコンポーネントの連鎖をバックアップ値を渡すには、イベントとイベントハンドラが必要です。例：

インデックスコンポーネントに、値の変更を処理するメソッドonValChangeがあるとします。その後、我々はこのように子コンポーネントをレンダリング：

// in the index component, a change will call the index component 
// onValChange method 
<Desktop val={this.props.val} onValChange={this.onValChange} /> 

// in the desktop component, a change will call the props.onValChange 
// method (which is the same one passed in the line above) 
<Component val={this.props.val} onValChange={this.props.onValChange} />