我应该什么时候使用 React.cloneElement 和 this.props.children？

Question

我仍然是 React 的菜鸟，在互联网上的许多示例中，我看到了渲染子元素的这种变化，这让我感到困惑。通常我会看到这个：

 class Users extends React.Component {
  render() {
    return (
      <div>
        <h2>Users</h2>
        {this.props.children}
      </div>
    )
  }
}

但后来我看到一个这样的例子：

 <ReactCSSTransitionGroup
     component="div"
     transitionName="example"
     transitionEnterTimeout={500}
     transitionLeaveTimeout={500}
     >
     {React.cloneElement(this.props.children, {
       key: this.props.location.pathname
      })}
</ReactCSSTransitionGroup>

现在我了解了 api，但 文档 并没有明确说明我应该何时使用它。

那么一个人能做什么而另一个人不能呢？有人可以用更好的例子向我解释吗？

原文由 Amit Erandole 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

props.children 不是真正的孩子；它是孩子的 _描述符_。所以你实际上没有什么要改变的；您不能更改任何道具，或编辑任何功能；你只能 _从中读取_。如果您需要进行任何修改，您必须使用 React.CloneElement 创建 _新元素_。

https://egghead.io/lessons/react-use-react-cloneelement-to-extend-functionality-of-children-components

一个例子：

组件的主要渲染功能，例如 App.js ：

 render() {
    return(
            <Paragraph>
              <Sentence>First</Sentence>
              <Sentence>Second</Sentence>
              <Sentence>Third</Sentence>
            </Paragraph>
    )
}

现在假设您需要为 onClick Paragraph ；所以在你的 Paragraph.js 你可以这样做：

 render() {
        return (
          <div>
          {React.Children.map(this.props.children, child => {
            return React.cloneElement(child, {
              onClick: this.props.onClick })
         })}
         </div>
       )
}

那么你可以这样做：

 render() {
  return(
        <Paragraph onClick={this.onClick}>
          <Sentence>First</Sentence>
          <Sentence>Second</Sentence>
          <Sentence>Third</Sentence>
        </Paragraph>
   )
}

注意： React.Children.map 函数只会看到 顶级 元素，它看不到这些元素呈现的任何东西；这意味着您正在向孩子提供直接道具（这里是 <Sentence /> 元素）。如果您需要进一步传递道具，假设您将在 <Sentence /> 元素之一中有一个 <div></div> 想要使用 onClick 然后在这种情况下，您可以使用 Context API 来执行此操作。将 Paragraph 提供者和 Sentence 元素作为消费者。

原文由 Nesa Mouzehkesh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

编辑：

改为查看 Vennesa 的回答，这是一个更好的解释。

原来的：

首先， React.cloneElement 示例仅在您的孩子是单个 React 元素时才有效。

对于几乎所有东西 {this.props.children} 都是你想要的。克隆在一些更高级的场景中很有用，在这些场景中，父组件发送一个元素，而子组件需要更改该元素上的一些属性或添加诸如 ref 之类的东西来访问实际的 DOM 元素。

在上面的例子中，给孩子的父母不知道组件的键要求，因此它创建了给定元素的副本，并根据对象中的一些唯一标识符添加了一个键。有关密钥功能的更多信息： https ://facebook.github.io/react/docs/multiple-components.html

原文由 Morten Olsen 发布，翻译遵循 CC BY-SA 4.0 许可协议