代码之家 › 专栏 › 技术社区 › typeoneerror

使用React头盔显示标题

react-helmet gatsby react-router-v4 reactjs javascript

typeoneerror · 技术社区 · 7 年前

我正在使用 Gatsby 的包含项 react-helmet 要显示 <title /> 和 <meta /> 中的标记 <head /> . 我真正想做的是将相同的标题发送给我的全球 <Header /> 组件,以便标题显示在页面的实际文本以及标题中。我如何使用React完成这样的任务?我习惯于余烬,在那里我可以 pageTitle 属性,并将其传递给组件,以及更新 <压头/> 具有类似余烬虫洞的值。

我知道我可以使用Flux作为全局状态,或者我可以将setTitle传递给我的页面组件,它们可以在每个页面组件的 componentDidMount ,但有没有更好的方法来处理这个问题?可能使用React路由器4?

到目前为止,我能够像这样理解位置上下文:

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

因此,我可以在其中添加一个函数,根据路径查找页面标题,但我希望页面的“标题”改为全局设置。

1 回复 | 直到 7 年前

nwalke 6 年前

React头盔具有 onChangeClientState 属性,该属性可用于在 <Helmet> 组件更改状态。

使用帖子问题中的示例:

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>
    );
  }
}

如果在子组件中使用 <头盔> 全球 title 状态将更改以反映和更新应用程序中其他位置的标题。

推荐文章

thomasna82 · 如果在React中单击链接,SlideMenu将不会关闭

7 年前

Aaron Austin · Gatsby Source在查询中包含变量

7 年前

Barney · 从有内容的数据以编程方式创建Gatsby页面

7 年前

Eric Johnson · 如何基于当前url导入组件?

7 年前

typeoneerror · 使用React头盔显示标题

7 年前

dlaub3 · 如何在平面文件CMS中实现搜索

7 年前

dlaub3 · 盖茨比。带WordPress的js

7 年前

Avritt Rohwer · 在gatsby中使用非react的组件框架

7 年前

Chris Geirman · 如何将盖茨比混合站点连接到Apollo/Graphcool(或Redux)?

7 年前