React.js：子コンポーネントから親タイトルを設定する

Question

私はReact/Reduxでウェブサイトを開発しており、私はreact-routerを使用しています。子のページから親コンポーネントのタイトルを設定したいと思います。

const App = ({ title, children }) => (
    <div> 
    <h1>{title}</h1> 
    {children} 
    </div> 
); 

const Page1 =() => (
    <p>Content Page 1</p> 
); 

const Page2 =() => (
    <p>Content Page 1</p> 
); 

私はDocumentTitleを見て、それは私が探していますものではありません。

ご存知ですか？

ありがとうございます！

Answer 1

titleは状態の一部となるため、親コンポーネント（App）をステートレスコンポーネントではなくクラスコンポーネントにする必要があります。あなたは親の中にsetTitleという関数を持っています。これは子供に小道具として渡されます。子どもに追加の小道具を渡すには、React.cloneElementを使用する必要があります。も使用しました。子コンポーネントが1つしかない場合は不要です。

class App extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      title: 'Default Title' 
     } 
     this.setTitle = this.setTitle.bind(this); 
    } 

    setTitle(newTitle) { 
     this.setState({ 
      title: newTitle 
     }); 
    } 

    render() { 
     return (
      <div> 
       <h1>{this.state.title}</h1> 
       {React.Children.map(this.props.children, child => 
        React.cloneElement(child, { setParentTitle: this.setTitle }) 
       } 
      </div> 
     ); 
    } 
} 

const Page1 = ({ setParentTitle }) => { 
    setParentTitle('Page 1'); 
    return (
     <p> Content Page 1</p> 
    ); 
};