Question

我的应用程序中有主要组件，我有设置文档标题的方法。组件看起来像：

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和该组件的子组件）中设置文档标题。问题是我在故事书回购中有主要组件而且我不能在主要组件的索引文件中使用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>

通过子组件中的props更新文档标题

1 个答案: