reactjs - React 中的动态标题内容

Question

我将构建一个 React 应用程序，其中每个页面都有自己的标题内容(标题组件我的意思不是 head 元素)，并且其内容可能看起来不一样(例如，对于搜索页面，我们在标题上有一个输入对于单页，我们有单个标题和操作按钮，就像 native 应用程序一样)并且页面数量非常大，但我不知道该怎么做，我需要指导。我想看看react有没有方便的方案来实现这个？我是否必须为每个页面制作一个专有的标题组件？谢谢。

Answer 1

在这种情况下你可以使用 react-router 例如，假设你有两个组件Header 和 Contact us 并且您想更改这两个组件的标题/内容，因此您可以这样做。

假设这是您的 Header 组件:-

import React from 'react';
import About from './components/About';

class Header extends React.Component {
    state = {
      title: this.props.title
    };


 render() {
  return (
   <div>
     <h1>{this.state.title}</h1>
   </div>
  );
 }
}

export default Header;

而您拥有的其他组件联系我们有点像这样:-

import React from 'react';

class About extends React.Component {

 componentDidMount(){
  this.setState({ title: 'Contact us' });
 }

 render() {
  return (
   <div>
    <article>Your contact us contents will be here..</article>  
   </div>
  );
 }
}

export default Contact;

现在您可以使用 react-router 获取 App.js 组件中的当前路径名。现在，基于此当前路径名，您可以将标题作为 props 发送到包含该名称的 header 。

例子:-

title = () => {
    switch(this.props.location.pathname){
        case "contact":
            return "Contact us";
        case "signin":
            return "Sigin";
        default:
            return "app_name"
    }
}

或者您也可以使用 react-helmet 包，它用于动态更改 header 的内容，这里是链接:-

https://dev.to/guimg/dynamic-document-head-with-react-helmet-28o6