Question

我有几种不同的反应成分。我开始使用react路由器。一切都很好，除了我无法克服一个问题。我将我的组件渲染到index.html文件，如下所示：

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

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

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

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

Answer 1

为您想要个性化css的每个组件设置容器div：

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标签类，并在卸载时将其留空。

React.js路由器呈现不同的正文标记

2 个答案: