REACT - 检索父母的状态并传递给孩子

Question

我正在学习 React，并且已经到了一个有点卡住的地步。这是我添加的父组件，其属性 im 用于使用 JSON 对象填充其状态：

var App = React.createClass({
    getInitialState: function() {
        return {
            clothing:{},
            order:{}
        }   
    },
    loadClothingItems: function(){
        this.setState({clothing:clothing});
    },
});

在我的 App 渲染函数中，我正在传递 loadClothingItems 的应用程序道具，如下所示：

<OtherOptions loadClothingItems={this.loadClothingItems} />

这里是子组件（OtherOptions）。有一个 onClick 填充 App 状态的标签。然后，我需要将已添加到 App 的状态返回到 OtherOptions，以便将我的所有对象键属性生成到 ul 中的 li 项中：

var OtherOptions = React.createClass({
   render:function(){
       return (
           <div className="other-options-inner">
        <a onClick={this.props.loadClothingItems}>Load Clothing</a>
               <ul>
                   {console.log(this.props.state)}
               </ul>
               </div>
       )
   } 
});

当我最初加载应用程序时，我会得到一个“未定义”的控制台日志，因为我尚未填充应用程序组件状态，但当我单击 a-tag 时，它会给我“再次未定义”。

我期待 App 的新状态在这里被传递给 OtherOptions，这样我就可以获取状态并渲染出一些 li 项目。也许我没有以正确的方式与父母沟通，或者我完全偏离了轨道，但无论哪种方式，我都被卡住了，文档也没有帮助。

谢谢

Answer 1

如果您需要将所有状态传递给子组件，那么您可以通过 props <OtherOptions items={this.state} loadClothingItems={this.loadClothingItems} /> 并通过this.props.items在子组件中访问它

另外，我不确定您要在loadClothingItems 中完成什么，但clothing 不存在任何地方，因此尝试将clothing 的状态设置为服装将是未定义的。