使用ReactJs根据redux状态下的更新动态更改CSS属性

// 安装依赖
npm install react redux

// 引入依赖
import React from 'react';
import { connect } from 'react-redux';

// 创建Redux store
const initialState = {
  cssProperty: 'initialValue'
};

const reducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_CSS_PROPERTY':
      return {
        ...state,
        cssProperty: action.payload
      };
    default:
      return state;
  }
};

const store = createStore(reducer);

// 创建React组件
class MyComponent extends React.Component {
  componentDidUpdate(prevProps) {
    if (prevProps.cssProperty !== this.props.cssProperty) {
      // 根据状态的变化来动态更改CSS属性
      document.getElementById('myElement').style.property = this.props.cssProperty;
    }
  }

  render() {
    return <div id="myElement">Hello, World!</div>;
  }
}

// 将组件连接到Redux store
const mapStateToProps = state => ({
  cssProperty: state.cssProperty
});

const ConnectedComponent = connect(mapStateToProps)(MyComponent);

// 渲染组件
ReactDOM.render(
  <Provider store={store}>
    <ConnectedComponent />
  </Provider>,
  document.getElementById('root')
);