我正在使用 Gatsby包含 react-helmet显示 <title />和 <meta /> <head /> 中的标签.我真正想做的是将相同的标题发送到我的全局 <Header />组件，以便标题显示在页面的实际文本中以及标题中。我如何用 React 完成这样的事情？我习惯了 Ember，在那里我可以设置一个 pageTitle应用程序 Controller /路由上的属性并将其传递给组件并更新 <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>
)
}
所以我可以在其中添加一个函数来根据路径查找页面标题，但我希望页面的“标题”改为全局设置。
最佳答案
React Helm 有一个 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状态将更改以反射(reflect)和更新应用中其他地方的标题。
关于javascript - 使用 React Helmet 显示标题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47915906/