使用React Router，如何为HTML元素分配一个类？

Question

I'm using React Router to do routing for my react app. 我正在使用React Router为我的React应用程序进行路由。

On some pages, I want the entirety of the page to have a particular background color. 在某些页面上，我希望整个页面具有特定的背景色。 There are a few ways of doing this, but a simple one is to apply a class + CSS to the HTML element. 有几种方法可以做到这一点，但是一个简单的方法就是将一个类+ CSS应用于HTML元素。

How can I do this? 我怎样才能做到这一点？

index.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 app.jsx

var React = require('react');
var Routes = require('./routes');

React.render(Routes, document.querySelector('.container'));

routes.jsx 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;

Answer 1

Although it's possible to reference the <html> element from inside a React component, doing so is an anti-pattern. 尽管可以从React组件内部引用<html>元素，但这是一种反模式。

You would be much better making <Fullscreen /> components, that take a color and children components as properties. 制作<Fullscreen />组件（将颜色和子组件作为属性）会更好。

<Fullscreen color='green'>
  <LandingPage />
</Fullscreen>

Internally that component would look something like this. 在内部，该组件看起来像这样。

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>
  );
};

If you're going to be using these components with React router, the easiest way to create components to pass as props to <Route /> is with a helper function. 如果您将这些组件与React Router一起使用，则创建组件以作为道具传递给<Route />的最简单方法是使用助手功能。

function makeFullscreen(component, color) {
  return (
    <Fullscreen color={color}>
      {component}
    </Fullscreen>
  );
}

Then create your route components by calling that function. 然后通过调用该函数来创建路由组件。

var routes = (
  <Router history={new HashHistory}>
    <Route path="/" component={makeFullscreen(LandingPage, 'red')}></Route>
    <Route path="/register" component={makeFullscreen(RegisterPage, 'blue')} />
  </Router>
);

This way you aren't breaking the React hierarchy and you'll be able to embed your components inside other pages, without worrying about them changing the background color of the page itself. 这样，您就不会破坏React层次结构，并且可以将组件嵌入其他页面中，而不必担心它们会更改页面本身的背景颜色。

Not Recommended 不建议

Of course, if this you don't mind going against React, then you can just directly modify the <html> tag. 当然，如果您不介意使用React，那么您可以直接修改<html>标签。 Use the componentDidMount lifecycle hook to make sure the component is mounted, then get the element and simply change the background color. 使用componentDidMount生命周期钩子确保已安装组件，然后获取元素并只需更改背景颜色。

// LandingPage
componentDidMount: function() {
  var html = document.documentElement;
  html.style.backgroundColor = 'green';
}

// RegisterPage
componentDidMount: function() {
  var html = document.documentElement;
  html.style.backgroundColor = 'blue';
}

This could even be turned into a mixin. 这甚至可以变成混入。

function BackgroundColorMixin(color) {
  return {
    componentDidMount: function() {
      var html = document.documentElement;
      html.backgroundColor = color;
    }
  };
}

// LandingPage
mixins: [BackgroundColorMixin('green')]

// RegisterPage
mixins: [BackgroundColorMixin('blue')]

使用React Router，如何为HTML元素分配一个类？

问题描述

1 个解决方案

解决方案1
3 已采纳 2015-11-29 08:37:55

Not Recommended 不建议

使用React Router，如何为HTML元素分配一个类？

问题描述

1 个解决方案

解决方案1 3 已采纳 2015-11-29 08:37:55

Not Recommended 不建议

解决方案1
3 已采纳 2015-11-29 08:37:55