在 ReactJS 中设置页面标题答案

【问题标题】：Set page title in ReactJS在 ReactJS 中设置页面标题
【发布时间】：2015-07-17 17:41:20
【问题描述】：

我在我的第一个 React 应用中使用 Material Design Lite，布局基本上是这样的：

<html>
  <head>
    <!-- Material Design Lite -->
    <script src="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.min.js"></script>
    <link rel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.0/material.indigo-pink.min.css">
    <!-- Material Design icon font -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  </head>
  <body>
    <!-- Always shows a header, even in smaller screens. -->
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
      <header class="mdl-layout__header">
        <div class="mdl-layout__header-row">
          <!-- Title -->
          <span class="mdl-layout-title">Title</span>
          <!-- Add spacer, to align navigation to the right -->
          <div class="mdl-layout-spacer"></div>
          <!-- Navigation. We hide it in small screens. -->
          <nav class="mdl-navigation mdl-layout--large-screen-only">
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
            <a class="mdl-navigation__link" href="">Link</a>
          </nav>
        </div>
      </header>
      <div class="mdl-layout__drawer">
        <span class="mdl-layout-title">Title</span>
        <nav class="mdl-navigation">
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
          <a class="mdl-navigation__link" href="">Link</a>
        </nav>
      </div>
      <main class="mdl-layout__content">
        <div class="page-content"><!-- Your content goes here --></div>
      </main>
    </div>
  </body>
</html>

我在 react 中的组件是这样的：

在菜单和标题里面我有一个“标题”，这是设置页面标题（如document.title）。但是，我该如何设置呢？

我的组件结构是：

标题+菜单

页面组件

但是每个“页面组件”都有唯一的标题。我可以在子（页面内容）组件中设置状态并读取父组件（标题+菜单）吗？

【问题讨论】：

你的问题有点混乱。您是否在同一页面上呈现多个组件？如果是这样，为什么要每个组件设置文档标题？
每个组件都有标题，比如“home”、“about”等。我需要的是把这个标题推到菜单（父组件）中。

标签： javascript reactjs

【解决方案1】：

我建议遵循你的模板 html 的结构：

呈现 mdl 块的顶级“页面”组件：

<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">

具有__header、__drawer和__content元素对应的3个子组件，并根据需要添加其中的子组件。

这样“页面”状态，例如当前菜单项，对应的页面标题+标题，以及要渲染的正文内容，都可以在与页面整体相关的组件中进行跟踪，详细信息为作为道具传递给孩子们。

【讨论】：

没错，我更改了容器 div 并解决了我的问题。 :)