Question

我是React的新手。我不理解this code中的一部分：

var HelloMessage = React.createClass({
    render: function() {
        return <h2>{this.props.message}</h2>;
    }
});

var TextBox = React.createClass({
    getInitialState: function() {
        return { isEditing: false }
    },
    update: function() {
        // Where is props.update defined? //
        this.props.update(this.refs.messageTextBox.value);
        this.setState(
            {
                isEditing: false
            });
    },
    edit: function() {
        this.setState({ isEditing: true});
    },

在代码中，我找不到props的{{1}}声明。但是查看代码我们应该将“update”视为TextBox组件的属性。

我没有在任何渲染方法中看到update的明确声明。

this.props.update如何/在哪里定义？

Answer 1

因此，在HelloReact组件render方法中，会返回一些TextBox个组件，如下所示：

...
<TextBox label='First Name' update={this.update.bind(null, 'firstName')}>
...

现在发生的事情是HelloReact正在将名为update的道具传递给此TextBox组件。这意味着在TextBox组件内部，我将能够将此支柱与this.props.update一起使用。从父母传下来的每个道具都会填充孩子的this.props。在这种特定情况下，我们会传递label和update。

现在，在TextBox组件中，我们可以使用this.props.label和this.props.update直观地访问这些道具。在这个组件中，它定义了一个名为update的私有方法，这是您发布的代码片段中的代码，具有更好的格式：

...
update: function() {
  this.props.update(this.refs.messageTextBox.value);
  this.setState({ isEditing: false });
},
...

所以我们在这里调用this.props.update，这是从HelloReact中的父传递下来的道具。我们在私有方法中包装此调用的原因是因为除了能够调用this.props.update()之外我们还想做其他事情，在这种情况下我们想要更新TextBox组件的状态同样。

我希望这个解释很清楚。我建议从官方文档中阅读React，这些文档非常棒，或者在线观看任何一个教程。这些是React的关键概念，您需要正确理解它们才能在React中进行开发。

对于这种情况，你可能想阅读this，它来自官方文档并且是关于道具的。

如何声明react.js的道具

1 个答案: