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＆gt; Unit＆gt; Army传递。哪一个是父组件？老实说，我认为它是Uniform组件，因为在我们安装组件时会声明所有属性值。这对我来说有点混乱，因为我知道父组件可以将属性传递给子节点，但子节点不能传递属性。在我正在阅读的书中，该例子来自Shirt＆gt; Label＆gt; Display。

我真的只需要澄清这三个组成部分是实际的父母。它是声明属性的属性还是属性值初始化的位置？

Answer 1

正如你所说，

Uniform是Unit
Unit是Army

基本上父组件呈现子组件，因此如果在渲染中看到组件，那么它就是子组件。

-

此外，有时您会听到许多级别的父级的“祖父母”，或者树的最顶部的“root”组件。

Answer 2

你是对的。 <Uniform />是父组件。当它安装在DOM中时，它的外观如下：

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

这对我来说有点混乱，因为我知道父组件可以将属性传递给子节点，但子节点不能传递属性。

好吧，子组件也可以通过附加回调值将值传递给父组件。请查看Pass props to parent component in React.js以获取详细答案。

希望这有帮助！

这个reactJS代码中的父组件是哪一个？

2 个答案: