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的道具如何聲明

回答

相關問題