React.js 路由器渲染不同的body标签

Question

我有几个不同的 React 组件。我开始使用反应路由器。一切正常，除了我无法克服一个问题。我正在将组件渲染到 index.html 文件，如下所示：

<body> 
<div id="app"></div>
</body>

我正在渲染到 id="app"。正如我提到的，一切都很好，但问题是某些组件需要不同的 body 标签，因为它与设计相关，例如：

<body class="page-landing">
</body>

是否可以通过路由器以某种方式传递正文选项？或者还有其他方法可以解决这个问题吗？

Answer 1

为您想要个性化的每个组件设计一个容器 div css:

class LandingPage extends React.Component {

    render() {
        return (
            <div className="page-landing"></div>
        );
    }
}

并有类似的东西：

render((
    <Route path="/" component={MyApp}>
      <IndexRoute component={LandingPage} />
      <Route path="about" component={About} />
    </Route>
), document.getElementById('app'))

只让 body 管理 css 您希望在您的应用程序中实现全球化。

Answer 2

我解决了我的问题：

componentDidMount() {
    document.getElementsByTagName('body')[0].className = 'page-landing';
}

componentWillUnmount() {
    document.getElementsByTagName('body')[0].className = '';
}

当我安装组件时，它改变了 body 标签 class 并且在卸载时将其留空。

React.js 路由器渲染不同的body标签

React.js router rendering different body tags

javascript

reactjs

react-router