如何使用React Redux进行简单的onClick更改子组件的类名？

Question

我让React Redux正在改变我的子组件的类名，但我是通过

来完成的

//Subscribe with our function that sets our state
this.props.store.subscribe( this.onSelectChange );

（其中onSelectChange是我的组件中的一个函数，用于更改其状态的属性。

根据redux文档，我应该使用像ReactRedux的connect方法这样的“视图绑定库”。但是每个教程都非常复杂。它们很难理解，并且似乎比我现在需要使用的代码大约多5倍。直接使用Redux，我总共有6行代码。

我如何简单地使用“正确”的方式让我的子组件更改其类名？

Answer 1

如果您真正需要的是在点击时更新类名，React完全有能力在不涉及Redux商店的情况下执行此操作。

React的整个想法是每个组件都有一些state对象，以及一个render函数将状态转换为标记。如果您想更改视图，则应更改state并再次让React调用render。以下示例切换按钮的类名（未测试）：

class MyComponent extends React.Component {

  constructor(props) {
    super(props)
    this.state = {
      highlighted: false
    }
    this.buttonClicked = this.buttonClicked.bind(this);
  }

  buttonClicked() {
    var highlighted = !this.state.highlighted
    this.setState({
      highlighted: highlighted
    })
  }

  render(){
    var classname = this.state.highlighted ? "highlighted-btn" : "normal-btn"
    return (
      <button onClick={this.buttonClicked} className={classname} />
    )
  }
}

我们通过调用render来触发setState，我们使用状态来确定按钮的类名。

Answer 2

解决方案1 ​​

好吧，如果你改变className，因为你想要不同的风格。

我建议你可以在其childComponent中使用setState。

here is for your reference

解决方案2

另一方面，如果你想使用Redux来实现它。

您可能需要先使用减速机。让我们说selectState

然后你需要一个动作。这里我们将其命名为changeSelectState

现在，我们可以使用connect上的react-redux container component

并将此方法传递给presentational component。就是这样。

所以，您可以做的流程是

1. 添加用于存储数据的reducer
2. 添加更改数据的操作
3. 通过connect将该数据和操作导入container component
4. 将它们传递给presentational component
5. 点击并通过该操作更改值