reactjs - 如何在 React Route 的父级中设置状态变量？

Question

我在我的应用程序中实现路由很有趣，但发现很难在父级中使用路由正在呈现的屏幕名称设置页面标题，如下所示:

class App...
  setTitle(title) {
      this.state.screentitle = title
      this.setState(this.state)
  }
  ...
  <h1>{this.state.title}</h1}
  ...
  <Route path='/Search' render={props => <ScreenSearch setTitle={this.setTitle} {...props} />} />

并且每个 child 都拥有实际的标题文本，例如:

class ScreenSearch...
  componentDidMount() {
      this.props.setTitle("Search");
  }

虽然这确实有效，但我更愿意将所有子屏幕的标题文本以及所有 Route 保留在父屏幕中。规则。毕竟，子对象应该只做他们的工作，比如实现一个搜索页面，但不需要知道它在父级调用什么。

此外，这似乎是一种复杂的方式，代码太多，无法设置愚蠢的标题。

作为React Route的初学者，请问有没有更好的方法。

Answer 1

您可以实现 Layout将具有共享项目的组件，如页面标题、导航等。
布局组件

class DefaultLayout extends React.Component{  
  render() {
    return (
      <div>
        <div className="header">
          <h1>Company Name</h1>
          <Navigation />
        </dv>
        <div className="content">
          <h1>{this.props.title}</h1>
          {this.props.children}
        </div>
        <div className="footer">
          <p>Copyright (c) 2014 Company Name</p>
        </div>
      </div>
    );
  }  
};

module.exports = DefaultLayout;

和子页面

var React = require('react');
var DefaultLayout = require('./DefaultLayout');

class PageOne extends React.Component{
  this.state={
     title:"Page 1"
  }
  render() {
    return (
      <DefaultLayout title={this.props.title}>
        <p>The page's content...</p>
        <p>goes here.</p>
      </DefaultLayout>
    );
  }
}