reactJS中的父子组件对象传递

Question

var MyComponent = React.createClass({  
 getInitialState: function () {
   return { items: '' };
},

componentDidMount: function () {

    this.onSuccess();

},

onSuccess: function () {

  this.setState({ items: items });
 },

 render: function () {

  return (

          <Cart items={this.state.items} >
            <CartHeader />
            <CartContent />
            <CartFooter />
          </Cart>
   )   
  }
 });


window.Cart = React.createClass({

render: function () {

return (

      <div>
        Cart{this.props.children}

      </div>  

  );
 }
 });



window.CartHeader = React.createClass({

render: function () {
return (

      <div>
        CartHeader
        {this.props.items}
     </div>  

   );
 }
 });



 window.CartContent = React.createClass({

render: function () {
return (

      <div>
            CartContent
            {this.props.items}
        </div>  

  );
  }
 });



 window.CartFooter = React.createClass({

render: function () {
return (

      <div>
        CartFooter
        {this.props.items}
        </div>  

  );
  }
 });

其中"items“是一个对象。

现在，我的问题是如何获取子代中对象的值？

这是正确的做法吗？实际上，我还是个新手。如果有任何建议，请让我知道。

我的目的是将对象数据发送给每个子对象，以便将来如果我不想"cartHeader"，我可以从中删除组件。

Answer 1

有三种方法可以做到这一点：

1. <Cart items={this.state.items} >
    Under Cart component load the child component and pass the this.props.item in each child.

2. Use Context

3. Use cloneElement function

在这种情况下，我更喜欢两个选项(场景)