Question

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

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} />} />

每个孩子都拥有实际的标题文本，例如：

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

虽然这确实可行，但我希望保留所有父级所有子屏幕的标题文本以及所有Route规则。毕竟，子对象应该只执行其工作，就像实现搜索页面一样，但是不必知道父对象被称为什么。

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

作为React Route的初学者，我想问一下是否有更好的方法。

Answer 1

这是一种实现方式，如果您有很多路线，则可以创建自己的Route组件，并以标题作为道具

<Route path='/Search' render={props => {
  this.state.screentitle!==this.setTitle && this.setTitle(this.setTitle)
  return <ScreenSearch  {...props} />} 
/>

看到您的评论后，我知道您想删除设置的标题，因此您需要从react-router和类似这样的对象中获取位置：

let routeTitles = { 
   /'search': 'The search' , 
  '/jobs': 'Look for a job'  
}
<Title>{routeTitles[this.props.location.pathname]}</Title>

Answer 2

您可以实现一个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>
    );
  }
}

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

2 个答案: