With React Router, how can I assign a class to the HTML element?

Question

I'm using React Router to do routing for my react app.

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.

How can I do this?

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;

Answer 1

Although it's possible to reference the <html> element from inside a React component, doing so is an anti-pattern.

You would be much better making <Fullscreen /> components, that take a color and children components as properties.

<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.

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.

Not Recommended

Of course, if this you don't mind going against React, then you can just directly modify the <html> tag. Use the componentDidMount lifecycle hook to make sure the component is mounted, then get the element and simply change the background color.

// 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')]

With React Router, how can I assign a class to the HTML element?

Question

1 answers

solution1
3 ACCPTED 2015-11-29 08:37:55

Not Recommended

With React Router, how can I assign a class to the HTML element?

Question

1 answers

solution1 3 ACCPTED 2015-11-29 08:37:55

Not Recommended

solution1
3 ACCPTED 2015-11-29 08:37:55