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

在这种情况下，我更喜欢2选项（方案）

reactJS中的父子组件对象传输

1 个答案: