react.jsの小道具を宣言する方法

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}); 
    }, 

はコードでは、私がupdateためprops宣言を見つけることができません。しかし、コードを見ると、TextBoxコンポーネントのプロパティとして「更新」が表示されるはずです。

どのレンダリング方法でも、this.props.updateの明示的な宣言が表示されません。

どのようにprops.updateが定義されていますか？だから、HelloReactコンポーネントrenderメソッドの内部で、いくつかのTextBoxコンポーネントがそうのように返され

Answer 1

：

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

今ここで何が起こっているのかはHelloReactこのTextBoxコンポーネントにupdateという名前の小道具を渡しているということです。つまり、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で開発できるようにするには、それらを正しく理解する必要があります。

​​をお読みになりたい場合は、オフィシャルドキュメントから来て、小道具に関するものです。