Question

我正在尝试使用CSS和className来切换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可见。您可以通过更新缩减器进行简单测试，使默认状态为{ hidden: false }，然后将其连接起来，由某种事件触发。

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

2 个答案: