[解決済み] Reactのstateとpropsの違いとは？

質問

PluralsightのReactのコースを見ていたら、講師がpropsは変更してはいけないと述べていました。私は今、以下の記事を読んでいます。 記事(uberVU/react-guide) propsとstateの比較で、次のように書かれています。

props と state の両方の変更がレンダーの更新をトリガーします。

記事の後半に書いてあります。

プロップス（プロパティの略）とは、Componentの構成要素のことで、オプションと言ってもよいでしょう。これらは上から受け取ったもので、不変のものです。

• つまり、プロップは変化しても良いが、イミュータブルであるべきということですか？
• どのような場合にpropsを使用し、どのような場合にstateを使用すべきですか？
• Reactコンポーネントが必要とするデータがある場合、propsを介して渡すか、Reactコンポーネントの中で、以下の方法で設定します。 getInitialState ?

解決方法は？

小道具と状態は関連しています。あるコンポーネントの状態が、子コンポーネントのプロップになることがよくあります。プロップは、親のレンダリングメソッド内で、第2引数に React.createElement() または、JSXを使用している場合は、より馴染みのあるタグの属性です。

<MyChild name={this.state.childsName} />

親の状態値である childsName は、子プロセスの this.props.name . 子から見ると、name propは不変です。もし変更する必要があれば、親はその内部状態を変更すればよいのです。

this.setState({ childsName: 'New name' });

で、Reactがそれを子に伝搬してくれます。当然の疑問として、子プロパティを変更する必要がある場合はどうするのでしょうか？これは通常、子のイベントと親のコールバックを通じて行われます。子は、例えば次のようなイベントを公開するかもしれません。 onNameChanged . 親は、コールバックハンドラを渡すことで、そのイベントを購読することになります。

<MyChild name={this.state.childsName} onNameChanged={this.handleName} />

子プロセスは、要求された新しい名前をイベントコールバックの引数として渡します。 this.props.onNameChanged('New name') 親はイベントハンドラでその名前を使用して状態を更新します。

handleName: function(newName) {
   this.setState({ childsName: newName });
}