通過子組件中的道具更新文檔標題

Question

我的應用程序中有Main組件，這里有設置文檔標題的方法。 組件看起來像：

class Main extends React.Component {
  componentWillMount() {
    this.setTitle(this.props.title);
  }

  componentWillReceiveProps(newProps) {
    if (newProps.title !== this.props.title) {
      this.setTitle(newProps.title);
    }
  }

  setTitle = (title) => {
    document.title = title;
  };

  render() {
    const { children } = this.props;

    return (
      <div>
        {children}
      </div>
    );
  }
}

export default Main;

用法：

class App extends Component {
  render() {
    return <Main><AppContent /></Main>;
  }
}

現在，我想在子組件（AppContent和該組件的子組件）中設置文檔標題。 問題是我在故事書存儲庫中有Main組件，並且無法在Main組件的索引文件中使用redux（我可以在App組件和其他組件中使用它，但以前從未使用過redux）。 任何人都可以給我提示我應該如何傳遞其他組件的標題？ 問候

Answer 1

為了以一種非常干凈的方式實現這一目標，我使用了NFL的react-helmet （是NFL）。

https://github.com/nfl/react-helmet

使用react-helmet您可以在任何級別的嵌套子組件中執行以下操作：

import { Helmet } from "react-helmet"

<ChildComponent>
    <Helmet>
        <title>react-helmet will make this the title</title>
    </Helmet>
</ChildComponent>