javascript - 如何更改 react 中导航栏标题的值？

Question

我刚学react，尝试用Bootstrap做一个网站。 假设下图是我的网页。 当我浏览路径为“/project/react”左上角的链接(导航栏标题的值为“React”)时，然后我浏览路径为“/project/bootstrap”的链接我希望左上角(值为导航栏标题是“Bootstrap”)。那可能吗？ 因为我得到的标题仍然显示“React”。 谢谢

//MyPage.js
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/css/bootstrap.css';
import React, { Component } from 'react';
import { Switch, Route } from 'react-router-dom';
import MyNavbar from '../components/MyNavbar';
import MyReact from '../components/MyReact';
import MyBootstrap from '../components/MyBootstrap';

let pgName = "My Page"
class MyPage extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageName: pgName
    };
  }

  setPageName = (pageName) => {
    pgName = pageName;
  }

  componentDidMount(){
    this.setState({ pageName: pgName });
  }

  render() {
    return (
      <div>
        <MyNavbar pageTitle={this.state.pageName}/>
        <Switch>
          <Route path="/project/bootstrap" component={MyBootstrap} render={this.setPageName("Bootstrap")}/>
          <Route path="/project/react" component={MyReact} render={this.setPageName("React")}/>
        </Switch>
      </div>
    )
  }
};

export default ProjectPage;


//MyNavbar.js
import React from 'react';
import Navbar from 'react-bootstrap/Navbar';
import Nav from 'react-bootstrap/Nav';
import Scrollchor from 'react-scrollchor';

class MyNavbar extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      pageTitle: props.pageTitle
    };
  }

  componentWillReceiveProps(props,state){
    this.setState({ pageTitle: props.pageTitle });
  }

  render() {
    return (
      <Navbar bg="dark " expand="lg" fixed="top">
        <Navbar.Brand href="#home" className="menu-title">{this.state.projectTitle}</Navbar.Brand>
        <Navbar.Toggle aria-controls="basic-navbar-nav" position="absolute" />
        <Navbar.Collapse id="basic-navbar-nav">
          <Nav className="ml-auto" >
            <Scrollchor to="#docs" animate={{ offset: -90, duration: 300 }} className="nav-link">Docs</Scrollchor>
            <Scrollchor to="#tutorial" animate={{ offset: -90, duration: 300 }} className="nav-link">Tutorial</Scrollchor>
            <Scrollchor to="#blog" animate={{ offset: -90, duration: 300 }} className="nav-link">Blog</Scrollchor>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

export default MyNavbar;


//MyReact.js
import Container from 'react-bootstrap/Container';
import React from 'react';

class MyReact extends React.Component {
  render() {
    return (
      <h1>React</h1>
    );
  }
}

export default MyReact;


//MyBootstrap.js
import Container from 'react-bootstrap/Container';
import React from 'react';

class MyBootstrap extends React.Component {
  render() {
    return (
      <h1>Bootstrap</h1>
    );
  }
}

export default MyBootstrap;

Answer 1

你可以做这样的事情。

将回调作为 prop 传递给组件

<Route
  path="/project/bootstrap"
  render={(props) => <MyBootstrap {...props} isAuthed={true} setPageName={this.setPageName.bind(this)} />}
/>

组件挂载时调用回调

import Container from 'react-bootstrap/Container';
import React from 'react';

class MyBootstrap extends React.Component {
  componentDidMount() {
    const { setPageName } = this.props;
    if(typeof setPageName === 'function) {
      setPageName('Bootstrap');
    }
  }
  render() {
    return (
      <h1>Bootstrap</h1>
    );
  }
}