ReactJSの子要素のステータスを取得するにはどうすればよいですか？

Question

私はあなたを理解し、あなたが主成分で自分のステータスが必要な場合は、私はしてください

class Child extends React.Component{ 

    constructor(props){ 
     super(props) 

     this.state = { 
      element : "I NEED THIS STATE" 
     } 

    } 

    render(){ 
     return <h1>Hello</h1> 
    } 
} 

class Main extends React.Component{ 
    render(){ 
     return(
      <div> 
       <Child /> 
      </div> 
     ) 
    } 
} 

Answer 1

私はこのような状況で、私の子要素のステータスを取得する方法を知っていただきたいと思います。

class Child extends React.Component{ 

    constructor(props){ 
     super(props) 

     this.state = { 
      element : "I NEED THIS STATE" 
     } 

    } 

    render(){ 
     this.props.checkStatus(this.state.element); 
     return <h1>Hello</h1> 
    } 
} 

class Main extends React.Component{ 
getChildStatus(status){ 
    console.log(status) 
} 
render(){ 
    return(
     <div> 
      <Child checkStatus={this.getChildStatus}/> 
     </div> 
    ) 
} 

}

フェリックスが言ったように、我々は通常のonClickかのonChangeのようないくつかのイベントで使用される小道具で投げる機能。何かのようにreturn <h1 onClick={this.props.checkStatus(this.state.element)}>Hello</h1>

Answer 2

それを動作させるだけで、@Andrewが示唆するようにすることができます。しかし、あなたが本当にあなたが何をしているのか分からない限り、私は強くを避けてください。あなたはこれをやっていません。

リアクトアドバンス一方向データフローあなたのコードを推論しやすくするために助けてください。経験則のアプローチは、小道具の下に、のように単純化することができます。

1. データは（読み取り専用親のstate事故によって変異から子供を防ぐ）propsを使用して、親から子へダウン渡します。
2. イベントは、子どもの気持ちを親に知らせるために子供たちから泡立ちます。反応成分システムにおいて

（典型的には、子供のイベントハンドラに渡された親関数/コールバックpropsを呼び出すことによって）、親と子の両方が孤立スコープを持っています。つまり、親は子どもについての知識がなく（子供の場合はstateを含む）、子供はpropsを通じて親のデータのみを読むことができます。 UIリフレッシュをトリガーするように状態を変更するには、友だちです。イベントハンドラ/サーバーリクエストコールバックでよく使用されます。this.setState()ところでhttps://facebook.github.io/react/docs/thinking-in-react.html

_：

は読書をお勧めします。リアクションの宣言的なコンポーネントの構成は、本質的に関数の構成です。あなたの質問は、「関数が宣言されている関数でクロージャのローカル変数を取得できますか？」ということに似ていますが、これを行うことはできますが、カプセル化を破るためになぜこのようにしているのですか？