渲染函数中的组件是否称为子组件

Question

我对子组件有点困惑。据我所知，子组件是嵌套在其他组件中的组件，例如

<Parent>
   <Child />
</Parent>

但是Parent组件的render函数里面的组件是什么。这叫什么？例如父组件

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

ComponentX 是否称为 Parent Component 的子组件？

感谢任何解释。提前致谢

Answer 1

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

this.props.children 这里是 Parent 的，当你将它们传递到 ComponentX 的 children 时。在 ComponentX 你会得到这个 children。示例：

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>
    )
  }
}

In this case, you get children of Parent to use for childrent of ComponentX

Answer 2

Is ComponentX called a children of Parent Component?

没有。

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

类似于React.Fragments的使用方式，没有封闭元素，会有一个警告：

Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag

渲染函数中的组件是否称为子组件

Is Component inside render function called child component

javascript

frontend

reactjs

react-component