Question

我对儿童组件有些困惑。据我所知，子组件是嵌套在其他组件内部的组件，例如

<Parent>
   <Child />
</Parent>

但是Parent组件的render函数内部的组件是什么。这叫什么？例如父级组件

class Parent extends React.Component {
  render() {
    return (
      <ComponentX>
        {this.props.children}
      </ComponentX>
    )
  }
}

ComponentX是否被称为父组件的子代？

我感谢任何解释。预先感谢

Answer 1

ComponentX是否被称为父组件的子代？

否。

ComponentX被称为Parent的子元素的封闭组件。

类似于React.Fragments的用法，但没有封闭元素，将出现警告：

解析错误：必须将相邻的JSX元素包装在一个封闭的标记中

Answer 2

class Parent extends React.Component {
  render() {
    return (
      <ComponentX>
        {this.props.children}
      </ComponentX>
    )
  }
}

this.props.children是Parent的名称，当您将它们传递给ComponentX的子元素时。在ComponentX中，您将得到这个孩子。示例：

class Parent extends React.Component {
  render() {
    return (
      <ComponentX>
        {this.props.children} // Here is children of Parent
      </ComponentX>
    )
  }
}

在ComponentX中：

class ComponentX extends React.Component {
  render() {
    return (
      <div>
        {this.props.children} // Here is children of ComponentX that you passed
        // in above
     </div>
    )
  }
}

在这种情况下，您获得Parent的孩子用于以下孩子的 ComponentX

渲染功能中的Component是否称为子组件

2 个答案: