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

Question

我正试图使用CSS和className s切换div。我正在使用redux更新布尔值的状态。我可以通过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);

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

style.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函数时。

Answer 2

您应该将mapStateToProps作为connect的第一个参数（在组件中）传递。

此外，您从未将调度方法toggleDiv连接到任何东西，因此从技术上讲，没有任何东西会使您的div可见。您可以通过更新reducer进行简短的测试，使其默认状态为{ hidden: false }，然后将其连接起来，由某个地方的某种事件触发。