表示されるページに基づいてヘッダータイトルを更新します（兄弟コンポーネント）

Question

App.jsコンポーネントには、<Header />および<Page />コンポーネントが含まれています。ページコンポーネントによっては<h1>を更新します。私はApp.jsファイルの反応ルータを使用しています。

各ページコンポーネントでタイトルを小道具に設定するにはどうすればよいですか？

import React, { Component } from 'react'; 

class About extends Component { 

componentDidMount(){ 
    this.setState({ title: 'About Us' }); 
} 

render() { 
    return (
    <div className="about container"> 
    <p>Page content.</p> 
    </div> 
); 
} 
} 

export default About; 

そしてHeaderコンポーネントは次のとおりです：

例えば、Aboutページコンポーネントがある

import React, { Component } from 'react'; 
import Nav from '../Nav'; 
import About from './components/About'; 

class Header extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     title: this.props.title 
    }; 
    } 

render() { 
    return (
    <div className="header"> 
    <h1>{this.state.title}</h1> 
    <Nav /> 
    </div> 
); 
} 
} 

export default Header; 

Answer 1

は一言で言えば、あなたがAppで、現在のパス名を取得するには、ルータを反応させるのに使用することができます。 jsコンポーネント。 現在のパス名に応じて、 "title"という名前のプロペラをヘッダーに送信し、対応する希望の名前を含めることができます。

getTitle =() => { 
    switch(this.props.location.pathname){ 
     case "about": 
      return "About us"; 
     case "login": 
      return "Login to app"; 
     default: 
      return "[APP_NAME]" 
    } 
} 

あなたがそのように汎用的なアプリケーションを保ち、1つの場所で、親コンポーネントの現在のパス名をキャッチすることができますこの方法です。