javascript - 使用 React Router，我如何为 HTML 元素分配一个类？-6ren

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

转载作者：行者123 更新时间：2023-11-29 19:18:50

我正在使用 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/