私はReactに関するPluralsightのコースを見ていましたが、講師はpropsは変更すべきではないと言っていました。今読んでいるのは記事 (uberVU/react-guide)議題と状態について、そしてそれは言う
プロパティと状態の変更の両方がレンダリングの更新をトリガーします。
記事の後半にはこう書かれています。
Props (プロパティの略) はコンポーネントの構成、つまりオプションです。これらは上から受け取られ、不変です。
- つまり、プロパティは変更可能ですが、不変である必要がありますか?
- いつ props を使用し、いつ state を使用すればよいのでしょうか?
- React コンポーネントに必要なデータがある場合、そのデータは props を介して渡される必要がありますか、それとも を介して React コンポーネント内で設定される必要がありますか
getInitialState?
ベストアンサー1
プロパティと状態は関連しています。1 つのコンポーネントの状態は、多くの場合、子コンポーネントのプロパティになります。プロパティは、親のレンダリング メソッド内で 2 番目の引数として子に渡されます。またはReact.createElement()、JSX を使用している場合は、より一般的なタグ属性として渡されます。
<MyChild name={this.state.childsName} />
親の の状態値はchildsName子の になりますthis.props.name。子の観点からは、 name プロパティは不変です。変更する必要がある場合は、親は内部状態を変更するだけです。
this.setState({ childsName: 'New name' });
そして、React がそれを子に伝播します。当然の疑問は、子が name プロパティを変更する必要がある場合はどうなるかということです。これは通常、子イベントと親コールバックを通じて行われます。子は、たとえば と呼ばれるイベントを公開する場合があります。onNameChanged親は、コールバック ハンドラーを渡すことによってイベントをサブスクライブします。
<MyChild name={this.state.childsName} onNameChanged={this.handleName} />
子は、たとえば を呼び出して、要求された新しい名前をイベント コールバックの引数として渡しthis.props.onNameChanged('New name')、親はイベント ハンドラーでその名前を使用して状態を更新します。
handleName: function(newName) {
this.setState({ childsName: newName });
}