Question

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

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

在我的App渲染功能中，我传递了loadClothingItems的app道具，如下所示：

<OtherOptions loadClothingItems={this.loadClothingItems} />

这是子组件（OtherOptions）。有一个a-tag，其中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>
       )
   } 
});

当我最初加载应用程序时，我得到一个＆＃34;未定义的控制台日志＆＃34;这是预期的，因为我还没有填充App组件状态但是当我点击a-tag时它会给我＆＃34;再次定义＆＃34;。

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

由于

Answer 1

如果您需要将所有状态传递给子组件，那么您可以通过道具--some data DECLARE @table TABLE (col varchar(500)) INSERT INTO @table SELECT 'whaCHAR(10)teverCHAR(10)whateverCHAR(10)' INSERT INTO @table SELECT 'whaCHAR(10)teverwhateverCHAR(10)' INSERT INTO @table SELECT 'whaCHAR(10)teverCHAR(10)whateverCHAR(10)~' --string to find DECLARE @string varchar(100) = 'CHAR(10)' --select SELECT col , (SELECT COUNT(*) - 1 FROM STRING_SPLIT (REPLACE(REPLACE(col, '~', ''), 'CHAR(10)', '~'), '~')) AS 'NumberOfBreaks' FROM @table完成此操作并通过<OtherOptions items={this.state} loadClothingItems={this.loadClothingItems} />

在子组件中访问它

此外，我不确定您要在this.props.items中完成什么，但loadClothingItems在任何地方都不存在，因此尝试将clothing的状态设置为衣服将不确定。

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

1 个答案: