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

小编典典

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

reactjs

我仍然是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，但是文档并未确切说明我何时应该使用它。

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

阅读 764

2020-07-22

共1个答案

小编典典

编辑：

相反，请看Vennesa的答案，这是一个更好的解释。

原版的：

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

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

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

2020-07-22