javascript – 使用React Helmet显示标题

2019年7月28日 604次阅读

我正在使用
Gatsby包含
react-helmet来显示< title />和< meta /> < head />中的标签.我真正想做的是将相同的标题发送到我的全局< Header />组件,因此标题显示在页面的实际文本中以及头部中.如何用React完成这样的事情？我已经习惯了Ember,我可以在Application控制器/路由上设置pageTitle属性并将其传递给组件以及更新< head />像ember-wormhole这样的值.

我知道我可以将Flux用于全局状态,或者我可以将setTitle传递给我的页面组件,并且他们可以在每个Page组件的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>
  )
}

所以我可以在那里添加一个函数来根据路径查找页面标题,但是我想要全局设置页面的“标题”.

最佳答案 React Helmet有一个onChangeClientState属性,当< Helmet>时可用于获取newState.组件改变状态.

使用帖子问题中的示例：

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>在子组件中设置标题全局标题状态将更改以反映并更新应用程序中其他位置的标题.

点赞