使用 React Helmet 显示标题

Question

我正在使用 Gatsby's inclusion of react-helmet 在 <head /> 中显示 <title /> 和 <meta /> 标签。我真正想做的是将相同的标题发送到我的全局 <Header /> 组件，以便标题显示在页面的实际文本中以及标题中。我如何用 React 完成这样的事情？我习惯了 Ember，我可以在应用程序 controller/route 上设置 pageTitle 属性并将其传递给组件并更新 <head /> ember-wormhole.

之类的值

我知道我可以将 Flux 用于全局状态，或者我可以将 setTitle 传递给我的页面组件，它们可以在每个页面组件的 componentDidMount 上发送一个 setTitle 操作，但是有没有更好的方法来处理这个？也许使用 React Router 4？

到目前为止，我能够像这样提取位置上下文：

const TemplateWrapper = (args) => {
  const { children, location } = args
  return (
    <div>
      <Helmet title={location.pathname} />
      <Header title={location.pathname} />
      <div>
        {children()}
      </div>
    </div>
  )
}

所以我可以在其中添加一个函数来根据路径查找页面标题，但我希望页面的 "Title" 改为全局设置。

Answer 1

React Helmet 有一个 onChangeClientState 属性可用于在 <Helmet> 组件更改状态时获取新状态。

使用 post 问题中的示例：

class Template extends Component {
  state = {
    title: 'Default Title'
  }
  render() {
    return (
      <div>
        <Helmet onChangeClientState={(newState) => this.setState({ title: newState.title }) } />
        <Header title={this.state.title} />
        <div>
          {this.props.children}
        </div>
      </div>
    );
  }
}

这样，如果您在具有 <Helmet> 的 sub-component 中设置标题，全局 title 状态将更改以反映和更新应用中其他地方的标题。

使用 React Helmet 显示标题

Display title with React Helmet

javascript

reactjs

react-router-v4

gatsby

react-helmet