1. ホーム
  2. ジャバスクリプト

[解決済み】React.jsでコンポーネントのpropsを更新することは可能ですか?

2022-04-05 13:23:01

質問

React.jsを使い始めてから、どうやら props は静的なもの(親コンポーネントから渡される)を想定しているのに対して state はイベントに応じて変更されます。 しかし、私はドキュメントで componentWillReceiveProps には、特にこの例が含まれています。

componentWillReceiveProps: function(nextProps) {
  this.setState({
    likesIncreasing: nextProps.likeCount > this.props.likeCount
  });
}

このことは、あるコンポーネントのプロパティが、以下の比較に基づいて変更できることを意味しているように思える。 nextProps から this.props . 何が足りないのでしょうか? プロップスはどのように変更されるのでしょうか、それとも、このプロップスが呼び出される場所について私が間違っているのでしょうか?

解決方法は?

コンポーネントは、配列またはオブジェクトでない限り、自身のプロップを更新できませんが(可能であってもコンポーネントが自身のプロップを更新することはアンチパターンです)、自身の状態とその子のプロップは更新することができます。

例えば、ダッシュボードが speed というフィールドがあり、その速度を表示するGaugeの子に渡します。その render メソッドは、単に return <Gauge speed={this.state.speed} /> . Dashboard が this.setState({speed: this.state.speed + 1}) の新しい値でゲージを再レンダリングします。 speed .

こうなる直前に、ゲージの componentWillReceiveProps が呼び出され、Gauge が新しい値と古い値とを比較する機会を得ます。