このreactJSコードの親コンポーネントはどちらですか？

Question

これは私が初めてここに投稿したもので、皆さんからもっと学びたいと思っています！

以下はReactJSを実践するためのコードです。私はChinnathambiの本からプログラムする方法を学んでいます。私は本が親コンポーネントであることを特定していないので、質問があります。

var Army = React.createClass ({ 
    render: function() { 
     return (
     <div> 
      <p>{this.props.insignia}</p> 
      <p>{this.props.color}</p> 
      <p>{this.props.country}</p> 
     </div> 
     ); 
     } 
    }); 
/*In this example we use the spread operator to pass an array of our values to 
our component. ...this.props poses the same values as insignia, color and country*/ 
var Unit = React.createClass ({ 
    render: function() { 
     return (
     <div> 
      <Army {...this.props}/> 
     </div> 
     ); 
     } 
    }); 

var Uniform = React.createClass ({ 
    render: function() { 
     return (
     <div> 
      <Unit {...this.props}/> 
     </div> 
     ); 
     } 
    }); 

/*This is an example of JSX: 
    Our component has been declared inside of the variable uniformComponent and 
    it has been implemented in our DOM render method by encapsulating them in 
    curly braces. 
*/ 
var uniformComponent = <Uniform insignia="US ARMY" color="OCP" country="USA"/>; 
var placement = document.querySelector("#container3"); 
ReactDOM.render (
    <div> 
    {uniformComponent} 
    </div>, 
    placement 
); 

ここでは、プロパティがUniform> Unit> Armyから渡される単純なコードを示します。どのコンポーネントが親コンポーネントですか？正直なところ、Uniformコンポーネントだと思うのは、すべてのプロパティ値がコンポーネントをマウントしている間に宣言されるからです。これは、親コンポーネントが子にプロパティを渡すことができますが、子はプロパティを渡すことができないことを理解しているので、少し混乱します。私が読んでいる本では、この例題はShirt> Label> Displayにあります。

私は実際に、これらの3つのコンポーネントのどれが実際の親であるかについての明確化が必要です。それはプロパティが宣言されているのでしょうか、それともプロパティ値が初期化されていますか？

Answer 1

あなたが言ったように、

• UniformがUnit
• Unitの親であるArmy

の親は基本的に親コンポーネントは子コンポーネントをレンダリングし、そのコンポーネントを見ればされますレンダリングでは、それは子供です。

-

はまた、時にはあなたは、ツリーの最上部に1つのための多くのレベルの親のための「祖父母」、または「ルート」コンポーネントを聞くことができます。

Answer 2

あなたは正しいです。 <Uniform />が親コンポーネントです。これはDOMに搭載されている場合は、これはそれがどのように見えるかです：私は親コンポーネントが子供にプロパティを渡すことができますが、子どもたちはプロパティを渡すことができないということを理解するため

<Uniform> 
    <Unit> 
    <Army /> 
    <Unit /> 
<Uniform /> 

これは私のために少し混乱です。

また、子コンポーネントは、コールバックをコールすることで親コンポーネントに値を渡すこともできます。詳しい回答はPass props to parent component in React.jsをご確認ください。

希望すると便利です。