我正在使用 React Router 为我的 React 应用程序做路由。
在某些页面上，我希望整个页面都具有特定的背景颜色。有几种方法可以做到这一点，但一种简单的方法是将类 + CSS 应用于 HTML 元素。
我该怎么做？
index.html
<head>
<title>My Site</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
</div>
</body>
<script src="main.js"></script>
app.jsx
var React = require('react');
var Routes = require('./routes');
React.render(Routes, document.querySelector('.container'));
routes.jsx
var React = require('react');
var ReactRouter = require('react-router');
var HashHistory = require('react-router/lib/HashHistory').default;
var Router = ReactRouter.Router;
var Route = ReactRouter.Route;
var LandingPage = require('./components/landing-page');
var RegisterPage = require('./components/register-page');
var routes = (
<Router history={new HashHistory}>
<Route path="/" component={LandingPage}></Route>
<Route path="/register" component={RegisterPage} />
</Router>
)
module.exports = routes;
最佳答案
尽管可以引用 <html>来自 React 组件内部的元素，这样做是一种反模式。
你会做得更好 <Fullscreen />组件，将颜色和子组件作为属性。
<Fullscreen color='green'>
<LandingPage />
</Fullscreen>
在内部，该组件看起来像这样。
var Fullscreen = function(props) {
var children = props.children,
color = props.color;
var styles = {
backgroundColor: color,
width: '100%',
height: '100%'
};
return (
<div style={styles}>
{children}
</div>
);
};
如果您要将这些组件与 React 路由器一起使用，创建组件以作为 Prop 传递给 <Route /> 的最简单方法具有辅助功能。
function makeFullscreen(component, color) {
return (
<Fullscreen color={color}>
{component}
</Fullscreen>
);
}
然后通过调用该函数创建您的路由组件。
var routes = (
<Router history={new HashHistory}>
<Route path="/" component={makeFullscreen(LandingPage, 'red')}></Route>
<Route path="/register" component={makeFullscreen(RegisterPage, 'blue')} />
</Router>
);
这样您就不会破坏 React 层次结构，您将能够将您的组件嵌入到其他页面中，而不必担心它们会改变页面本身的背景颜色。
不推荐
当然，如果你不介意与React作对，那么你可以直接修改<html>标签。使用 componentDidMount生命周期 Hook 以确保组件已安装，然后获取元素并简单地更改背景颜色。
// LandingPage
componentDidMount: function() {
var html = document.documentElement;
html.style.backgroundColor = 'green';
}
// RegisterPage
componentDidMount: function() {
var html = document.documentElement;
html.style.backgroundColor = 'blue';
}
这甚至可以变成一个 mixin。
function BackgroundColorMixin(color) {
return {
componentDidMount: function() {
var html = document.documentElement;
html.backgroundColor = color;
}
};
}
// LandingPage
mixins: [BackgroundColorMixin('green')]
// RegisterPage
mixins: [BackgroundColorMixin('blue')]
关于javascript - 使用 React Router，我如何为 HTML 元素分配一个类？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33980699/