componentWillReceiveProps内のデフォルトの小道具の上書き状態の変化に対応します

Question

updateFullWindowなどのコード内の別の場所に自分自身を更新できるfullWindowというChildコンポーネントの状態プロパティがあります。

子コンポーネント：

static get defaultProps(){ 
    return { 
     fullWindow: false 
    } 
} 
updateFullWindow = (value) => { 
    this.setState({fullWindow: value}); 
} 
componentWillReceiveProps(nextProps) { 
    this.setState({fullWindow: nextProps.fullWindow}); 
} 

Iはまた、fullWindowおよび他の状態のプロパティを更新することができるParent成分を有します。

親コンポーネント：

fullScreenCallback =() => { 
    this.setState({hideDetails: false}); 
} 
clickCallback =() => { 
    this.setState({fullWindow: true})); 
} 
render() { 
    return (
     <div> 
      <div onClick={this.clickCallback}>Click Me</div> 
      <Child {...this.state}/> 
     </div> 
    ); 
} 

私が持っている問題は、componentWillReceiveProps関数が戻っdefaultPropsに設定された小道具デフォルト値の値にChild状態にfullWindowプロパティを設定し、updateFullWindow()でsetStateを上書きしていることです。これは、小道具がnextPropsに渡されているため、他の状態が親で更新されるためです。

は基本的に私は唯一 clickCallbackを実行して、明示的に fullWindowプロパティを変更されたとき、子状態 fullWindowが nextPropsに変更したいです。

これを行うにはどうすればよいですか？

Answer 1

ような何かを行いますこれは子コンポーネントにあります。これにより、値が最新であることが常に保証されます。つまり、親の小道具の変更によって子供の状態が上書きされることはありません。

例えば：

親コンポーネント：

updateOptions = (newOptions) => { 
    this.setState({options: newOptions}); 
} 
render() { 
    return (
     <div> 
      <div onClick={this.clickCallback}>Click Me</div> 
      <Child {...this.state} updateOptions={this.updateOptions}/> 
     </div> 
    ); 
} 

子コンポーネント：

updateFullWindow = (value) => { 
    this.props.updateOptions({fullWindow: value}); 
} 

//Remove the componentWillReceiveProps 

このパターン詳細はこちらをご覧ください：https://discuss.reactjs.org/t/is-this-a-decent-pattern-to-update-parent-state-from-children/560

Answer 2

だから私はこの状態がフルスクリーンに設定されている場合、それはフルスクリーンに設定します。この

toggleFull() { 
    this.setState({fullscreen: !this.state.fullscreen}) 
} 

render() { 
    const shouldFull = (this.state.fullscreen != null && this.state.fullscreen) 
    || this.props.fullscreen 
    return shouldFull ? 
    <FullScreen /> : <NotFullScreen /> 
} 

のようにこれを正しく読んでいるならば、あなたは、あなたの子コンポーネントで何かを持っている可能性がありますが、もし state.fullscreen hasn」設定されていれば、this.props.fullscreenを使用します。

また、this.props.fullscreenは、デフォルトでfalseになります。これは、未定義がfalseになるためです。

また、onClickイベントにはtoggleFull機能を使用してください。これは書き留めただけではありません。

次に、あなたの親コンポーネントでは、実際にsetStatesを削除し、代わりに親を更新親から機能を伝承州と呼んでいた最終的に働いていた何この

<Child fullscreen={this.state.fullscreen} />