子コンポーネントが親コンポーネントの状態を変更しています

Question

ここでは、アプリケーションのルートコンポーネントがhandleHeaderTitle関数をすべての子プロセスに複製によって渡しています。 子コンポーネントの内部では、この関数はcomponentWillMount（） で呼び出され、ルートコンポーネントはルートに基づいてヘッダテキストを更新します。

ルート：

{ 
     this.props.children && 
        React.cloneElement(this.props.children, { 
         handleHeaderTitle: this.handleHeaderTitle 
        }) 
    } 

    handleHeaderTitle(title) { 
     this.setState({ headerTitle: title }); 
    } 

子供：

componentWillMount() { 
    this.props.handleHeaderTitle("Profile"); 
    } 
    Profile.propTypes = { handleHeaderTitle: React.PropTypes.func }; 

状態はここに、その親の子コンポーネントから設定されているように、実際に現地ではありませんので、Reduxの追加については、この権利ユースケースはありますか？

私はSET_PROFILE_HEADERのようなアクションを作成し、レデューサーの内側にこれらを組み合わせる必要があると思います。しかし、コンテナルートコンポーネントに子コンポーネントがヘッダータイトルを変更したことを通知する方法をまだ考えている

Answer 1

質問に直接答えるには、問題を解決するためにReduxは必要ありません。 Reduxは、多くの状態を維持する必要がある場合や、近い国の共通の祖先を持たないアプリケーションの一部に状態を反映させる必要がある場合に役立ちます。言い換えれば、古き良きリアクト状態を使うのはあまりにも面倒です。

Reactの特定の問題に対するより一般的なアプローチは、ルートではなく子コンポーネントにレイアウトを含めることです。これにより、子に親のコンテンツを制御させようとする問題が回避されます。これは、Reactのすべてである「単方向データフロー」を維持するのに役立ちます。

class Page extends React.Component { 
    render() { 
    return (
     <div> 
     <div className='profile-header'> 
      { this.props.headerTitle } 
     </div> 
     <div className='profile-content'> 
      { this.props.children } 
     </div> 
     </div>  
    ) 
    } 
} 

class MyFirstPage extends React.Component { 
    render() { 
    return (
     <Page headerTitle='Header Title 1'> 
      <div>My content here</div> 
     </Page> 
    ) 
    } 
}