Question

我正在尝试学习reactjs并构建一个小型应用程序，它接受名称，然后显示名称..

我有一个输入表单，在点击提交到名为names的状态对象后，我可以从输入表单中获取数据。

但是我坚持将状态从父级传递到我ShowNames组件内的另一个组件：

所以，在App中，我正在做这个渲染：

render : function() {
        return (
            <div>
                <InputName addToState={this.addToState}/>
                <ShowName renderName={this.renderName}/>
            </div>
        )
    }
});

然后ShowName组件有以下内容：

var ShowName = React.createClass({

    render : function() {
        return (
            <ListOfNames renderName={this.props.renderName}/>
        )
    }
});

所以我做了

var ListOfNames = React.createClass({

    render : function() {
        return (
            <ul renderName={this.props.renderName}>
                {Object.keys(this.state.names).map(this.renderName)}
            </ul>
        )
    }
});

但问题在于它无法读取属性＆＃39;名称＆＃39;为null。有人可以帮忙吗？

Answer 1

您需要初始化状态，否则状态将为null。

React.createClass({
    getInitialState: function() {
        return { names: [] };
    },

    // all the rest here
}

修改

看到代码后我注意到了一些错误，更新的代码现在在这里：http://jsbin.com/sewoxu/edit?js,output

那么主要的错误是ShowName的渲染函数是使用状态来获取名称，而是通过属性传递的名称：

<ShowName renderName={this.renderName} names={this.state.names}/>

所以在这种情况下，要访问您需要执行的names属性：

this.props.names

同样在示例中，我已将renderName功能移到ShowName组件内。

希望这会有所帮助：）

反应状态 - 我做错了什么？

1 个答案: