我应该什么时候使用 React.cloneElement 和 this.props.children? [英] When should I be using React.cloneElement vs this.props.children?

问题描述

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

class 用户扩展 React.Component {使成为() {返回 (<div><h2>用户</h2>{this.props.children}

)}}

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

现在我理解了 api，但是 docs 并没有说清楚当我应该使用它时.

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

解决方案

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

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

示例:

App.js 等组件的主要渲染函数:

render() {返回(<段落><句子>第一</句子><句子>第二</句子><句子>第三</句子></段落>)}

现在假设您需要为 Paragraph 的每个子项添加一个 onClick；所以在你的 Paragraph.js 你可以这样做:

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

)}

那么你可以这样做:

render() {返回(<段落onClick={this.onClick}><句子>第一</句子><句子>第二</句子><句子>第三</句子></段落>)}

注意:React.Children.map 函数只会看到 top level 元素，它看不到任何东西这些元素呈现；这意味着您正在向孩子们提供直接道具(这里是 元素).如果您需要进一步传递道具，假设您将在 之一内有一个 <div></div>想要使用 onClick 道具的元素，那么在这种情况下，您可以使用 Context API 来做到这一点.使 Paragraph 成为提供者，使 Sentence 元素成为消费者.

I am still a noob at React and in many examples on the internet, I see this variation in rendering child elements which I find confusing. Normally I see this:

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

But then I see an example like this:

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

Now I understand the api but the docs don't exactly make clear when I should be using it.

So what does one do which the other can't? Could someone explain this to me with better examples?

解决方案

props.children isn't the actual children; It is the descriptor of the children. So you don't have actually anything to change; you can't change any props, or edit any functionality; you can only read from it. If you need to make any modifications you have to create new elements using React.CloneElement.

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

An example:

main render function of a component such as App.js:

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

now let's say you need to add an onClick to each child of Paragraph; so in your Paragraph.js you can do:

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

then simply you can do this:

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

Note: the React.Children.map function will only see the top level elements, it does not see any of the things that those elements render; meaning that you are providing the direct props to children (here the <Sentence /> elements). If you need the props to be passed down further, let's say you will have a <div></div> inside one of the <Sentence /> elements that wants to use the onClick prop then in that case you can use the Context API to do it. Make the Paragraph the provider and the Sentence elements as consumer.

这篇关于我应该什么时候使用 React.cloneElement 和 this.props.children?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！