javascript - 在 React 中使用父 onClick 更改子类？

Question

我有多个父组件，每个父组件中都有嵌套的子组件。我希望在单击父组件中的链接时更改嵌套子组件中的类(显示/隐藏切换类型的东西)。我猜想这可以通过单击时在父组件中设置和更改状态来完成，但我不确定。这是处理这个问题的正确方法吗？

在根组件中保存状态通常是最佳实践吗(我应该注意，上面解释的父组件不是根组件)。

非常感谢任何帮助。谢谢!

Answer 1

通常，在组件层次结构中可以推送状态的越高越好。然后，随着父/根组件中的状态发生变化，新的 props 将滴落到子组件中。这使您的子组件更加简单，因为它们不必管理尽可能多的自身状态(如果有的话)。

就您而言，您是完全正确的。处理您父级中的点击事件，这将改变您的状态，然后根据该状态使用正确的类名渲染您的子组件。

var Child = React.createClass({
    render: function () {
        return <div {...this.props}></div>;
    }
});

var Parent = React.createClass({
    handleLinkClick: function (e) {
        this.setState({toggle: !this.state.toggle});
    },

    render: function () {
        return <Child className={this.state.toggle ? 'yes' : 'no'} />;
    }
});