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

这甚至不起作用，因为我还必须补偿还原动作，这对我来说，当我改变背景颜色的时候发送一个完全矫枉过正的事情，我不知道＃39; t需要将后台类存储在redux repo中。

但是如果我将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;
}

react - redux - thunk改变页面背景的简洁方式

1 个答案: