javascript - 在React.cloneElement之下再使用this.props.children会显示两遍组件

Question

代码传到github了点这里

代码传到github了点这里

代码传到github了点这里

1. npm i

2. npm start

3. 浏览器输入地址 http://localhost:3011/

下面大致描述一下问题：
代码结构是这样的

• App组件 （使用{ React.cloneElement(this.props.children, this.props) } ）

  • itemList组件 （使用this.props.children）

    • oneItem组件 (一些内容)

//App.js
//使用React.cloneElement是为了把一些redux得到的porps传过去问题本身和redux本身无关
  <p className="content-wrap">
        <content className="content-main">
          { React.cloneElement(this.props.children, this.props) }
        </content>
   </p>

//itemList.js
  <p>
        <ul>
            <li><Link to="/items/1">1</Link></li>
            <li><Link to="/items/2">2</Link></li>
            <li><Link to="/items/3">3</Link></li>
            <li><Link to="/items/4">4</Link></li>
        </ul>
        {this.props.children}
  </p>

//oneItme.js
<h2>
    这是{this.props.parmas.id}的详情
</h2>

App.js使用{ React.cloneElement(this.props.children, this.props) }

App.js使用{this.props.children}

怎么解决这种显示两次的问题？

Answer 1

{ React.cloneElement(this.props.children, this.props) }

你把 this.props 里的 children 传给 this.props.children 啦！

不懂你为什么要 clone 一下。