以简洁的方式改变页面的背景。

Question

我试图让我的页面改变背景色，以便初始化页面有一个不同的背景。

我的LogoPage组件：

import PropTypes from "prop-types";
import React from "react";

import ReactOnRails from "react-on-rails";
import LocationContainer from "../containers/LocationContainer";

const LogoPage = () => {
  return (
    <div className="logoPage">
      <h1>Name</h1>
      <LocationContainer />
    </div>
  );
};

LogoPage.propTypes = {};

export default LogoPage;

当应用程序试图获取landingPage组件调用的用户gps位置时，将显示如下：

import PropTypes from "prop-types";
import React from "react";

import ReactOnRails from "react-on-rails";
import NikelesContainer from "../containers/NikelesContainer";
import LogoPageContainer from "../containers/LogoPageContainer";

const Landing = props => {
  if (props.latitude && props.longitude) {
    return (
      <div className="body">
        <NikelesContainer />
      </div>
    );
  } else {
    return (
      <div className="body">
        <LogoPageContainer />
      </div>
    );
  }
};

Landing.propTypes = {
  latitude: PropTypes.number,
  longitude: PropTypes.number
};

export default Landing;

LogoPageContainer：

import { connectWithLifecycle } from "react-lifecycle-component";

import LogoPage from "../components/LogoPage";
import setRedBackground from "../actions/backgroundActions"
import setTransparentBackground from "../actions/backgroundActions"

// Which part of the Redux global state does our component want to receive as props?
const mapStateToProps = (state, props) => {
  return {};
};

const componentWillMount = () => {
  setRedBackground();
};

const componentWillUnmount = () => {
  setTransparentBackground();
};

// const actions = Object.assign(locationActions, lifecycleMethods);
export default connectWithLifecycle(mapStateToProps, {
  componentWillMount,
  componentWillUnmount
})(LogoPage);
// export default connectWithLifecycle(mapStateToProps)(LogoPage);

backgroundActions：

const setBackground = backgroundClass => {
  return document.body.className = backgroundClass;
}

const setRedBackground = () => {
  return function(dispatch) {
    dispatch(setBackground("red-background"));
  };
};

const setTransparentBackground = () => {
  return function(dispatch) {
    dispatch(setBackground(null));
  };
};

export { setRedBackground, setTransparentBackground };

这甚至是不起作用的，因为我必须补充同样的redux操作，在我看来，当我更改背景色时，这似乎是一个完全超量的调度，而且我不需要将背景类存储在redux中。

但是，如果我将document.body.className = ..直接放在回调中：

const componentWillMount = () => {
  document.body.className = "red-background";
};

我说错了

动作必须是普通的对象。使用自定义中间件进行异步操作

有什么更直接的方式来实现这一点呢？

编辑：

我的store.jsx

import { compose, combineReducers, applyMiddleware, createStore } from "redux";
import thunkMiddleware from "redux-thunk";

import nikeles from "../reducers/nikeles";
import location from "../reducers/location";
import page from "../reducers/page";

const store = railsProps => {
  const composedStore = compose(
    applyMiddleware(thunkMiddleware),
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
  );

  const combinedReducers = combineReducers({
    location,
    nikeles,
    page
  });
  return composedStore(createStore)(combinedReducers, railsProps);
};

export default store;

Answer 1

最后，我解决了这个问题，使我的LogoPage的div与整个页面重叠。

所以当它显示出来时，我看到了我想要的背景，当它被卸载时，整个东西就消失了，我喜欢这个解决方案，因为它是纯CSS。

这是我的scss课程：

.logo-page {
    opacity:0.8;
    background-color:$my-red;
    position:fixed;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
    z-index:1000;
}