Question

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

我知道我可以将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>
  )
}

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

Answer 1

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>在子组件中设置标题，则全局title状态将更改为反映并更新应用中其他位置的标题。

使用React Helmet显示标题

1 个答案: