react.js的道具如何声明

-2

我是React的新手。我不是在this code理解部分：react.js的道具如何声明

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声明update。但仔细查看代码，我们应该看到“更新”作为TextBox组件的属性。

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

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

来源

2017-06-01 CodeZilla

属性及其组件的值（作为JSX）是组件的键和值（作为React元素） – sudhnk

谢谢我能够找出属性的起源与您的回应 – CodeZilla

嗨！我编辑了你的文章，使其更具可读性，所以你可以得到你需要的帮助。我在你的例子中添加了一些代码。你应该总是包含你的代码的[minimal working example]（https://stackoverflow.com/help/mcve）以及你所看到的任何错误。我知道你想知道更多关于React的内部工作原理，但是如果你没有发布像我之前提到的那些引用，那么你不太可能得到帮助。祝你好运！ –

所以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中进行开发。

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

来源

2017-06-02 16:47:02 G4bri3l

非常感谢，你真的很清楚。赞赏 – CodeZilla

react.js的道具如何声明

回答

相关问题