どのようにして私の子供は親に鍵を教えさせるのですか？

Question

Reactでは、独自のIDを定義する子コンポーネントのリストをロードしています。次に、内部IDの設定に基づいて子供の配置を変更するパスを実行します。内部IDを親にどのように伝達するのですか？また、そのIDを親レンダリングのekeyとして使用するといいでしょう。内部IDがコンポーネント名と一致しないことに注意してください。

class Thing1 extends React.Component { 
    const ID = 'Thing1IDString'; 
} 

class Thing2 extends React.Component { 
    const ID = 'Thing2IDString'; 
} 


<Parent> 
<Thing1 /> 
<Thing2 /> 
<Thing3 /> 
</Parent> 

Answer 1

最初の事は何とか子IDを計算する方法を知っています。子IDがデータベースから来た場合は、子がそれらを計算するのではなく、親がそれらを計算するようにします。ツリー内の下位コンポーネントは、インテリジェントではありません。彼らは最終的な形で知る必要があるすべてのものを手渡すので、単純にレンダリングすることができます。

子供は親が作用するために必要な「プライベート」のデータは、一般的にして反応に解決されていますが、話をしている構造、：

親

にそのデータを保存する

• は、子にデータを子として渡す
• onDataChanged関数を子に渡すことで、子がデータを変更したときに親に伝えることができます。

これは「制御入力」パターンです。最初は気分が悪く、見た目には間接的すぎるように思えるかもしれません。しかし利点は、データフローが非常に予測可能であることです。今

、それはあなたのケースでは不可能であれば、あなたは本当には、あなたが子供たちにregisterChild機能を渡すために小道具やコンテキストを使用することができ、親に「登録」する子供たちを必要としています。子では、そのcomponentDidMountライフサイクルメソッドを使用して、計算されたIDでregisterChild関数を呼び出します。その後、親はこれらのIDを追跡することができます。

Answer 2

あなたの構文は紛らわしいものです。擬似サンプルを実際のReactJSコードサンプルに変換しましょう。

のは、あなたが子供を持っているとしましょう（S）（S）成分：

class Thing1 extends React.Component { 
    constructor(props) { 
     super(props); 

     this.id = 'Thing1IDString'; 
    } 

    render(){ 
     return (
      <p>Child component</p> 
     ); 
    } 
} 

あなたは親コンポーネントからThing1のIDプロパティにアクセスしたい場合は、どのようにcommunicate between componentsを行うにはいくつかの方法があります。

これは達成したいことによって異なります。あなただけの子コンポーネントのプロパティにアクセスしたい場合は、refsを使用することがあります。私は親をしようとしていることをお勧めしたい

class Parent extends React.Component { 
    doSomething() { 
     // Access anything you need from `this.refs.thing1` 
     const thing1ID = this.refs.thing1.id; 
    } 
    render() { 
     return (
      <div> 
       <button onClick={this.doSomething.bind(this)}>Get ID</button> 
       <Thing1 ref="thing1" />  
      </p> 
     ); 
    } 
}