javascript - 在 React JS/Redux 中使用 CSS 显示/隐藏 div

Question

我正在尝试使用 CSS 和 className 切换 div。我正在使用 redux 来更新 bool 值的状态。我可以通过 redux chrome 扩展程序确认状态 正在 发生变化，但 div 没有显示。如果有人对问题有任何想法，请告诉我。

组件:

const ShowHideDiv = (props) => (
  <div>
    <Button onClick={props.toggleDiv} />
    <div className={props.hidden ? style.hidden : style.open}>
      <TextInput />
    </div>
  </div>
);

function mapDispatchToProps(dispatch) {
  return {
    toggleDiv: () => dispatch(toggleDiv()),
  };
}

export default connect(null, mapDispatchToProps)(ShowHideDiv);

Action .js:

const toggleDiv = () => {
  return {
    type: 'TOGGLE_DIV',
  };
};

reducers.js

const toggleDivReducer = (state = { hidden: true}, action) => {
  switch(action.type) {
    case 'TOGGLE_DIV':
      return Object.assign({}, state, {hidden: !state.hidden});
    default:
      return state;
  }
};

样式.scss

.hidden {
  display: none;
}

.open {
  display: inline;
}

显示页面

<ShowHideDiv hidden={props.hidden} />

function mapStateToProps({demo}) {
  return {
    hidden: demo.hidden,
  };
}

Answer 1

我已经弄清楚我做错了什么。问题出在我的显示页面 mapStateToProps 中。我没有正确分配 hidden 属性。

而不是这样做:

function mapStateToProps({demo}) {
  return {
    hidden: demo.hidden,
  };
}

我应该这样做:

function mapStateToProps({demo}) {
  return {
    hidden: demo.toggleDivReducer.hidden,
  };
}

请务必牢记这一点，尤其是当您拥有 combineReducers 函数时。