Question

App.js组件包含<Header />和<Page />组件。我希望<h1>根据Page组件进行更新。我在App.js文件中使用react-router。

如何在每个页面组件中将标题设置为道具？

例如，About页面组件为：

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组件是：

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

简而言之，您可以使用React Router获取App.js组件中的当前路径名。根据当前路径名，您可以发送一个名为＆＃34; title＆＃34;到标题，包含相应的所需名称。

e.g。

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

通过这种方式，您可以在一个位置捕获父组件中的当前路径名，从而使您的应用程序保持通用。

根据显示的页面更新标题标题（兄弟组件）

1 个答案: