Show/Hide div 与 CSS 在 React JS/Redux

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 作为连接的第一个参数（在您的组件中）传递。

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

Answer 2

我知道我做错了什么了。问题出在我的显示页面 mapStateToProps。我没有正确分配 hidden 道具。

而不是这样做：

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

我应该这样做的：

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

请务必记住这一点，尤其是如果您有 combineReducers 函数。

Show/Hide div 与 CSS 在 React JS/Redux

Show/Hide div with CSS in React JS/Redux

javascript

css

reactjs

react-redux