Question

我试图了解CSS组件的场景：我有一个使用自己的类的react组件。该组件有一个辅助子组件，它也有自己的类。现在：当设置主要组件中的特定状态并应用特定类时，辅助组件的css应该对该类做出反应。

例如：

组件A使用组件B来显示内容。
点击组件A并做出反应设置＆＃34;点击该组件上的＆＃34; - 类
然后，组分B应在该类别上进行视觉反应

在纯CSS（或类似）中我会这样做：

组件A：

.component {
  height: 10px;
}

.component.clicked {
  height: 5px;
}

组件B

.clicked {
  .subComponent {
    background-color: orange;
  }
}

我知道有一种反应方式可以做到这一点。这种事情应该通过在组件之间传递的状态和道具来完成，以便完全避免这种情况。但我目前正在重构一个仍然存在这些问题的项目，而且我还没有真正了解如何使用react-css-modules正确地完成这项工作。

顺便说一句：我目前的解决方法使用：全球，但我真的非常想避免这种情况...

Answer 1

组件B：

.clicked:onclick, .subComponent {
 // code ...
}

这应该做到这一点。如果不是，我在css上表现不好，或者对你的问题感到困惑。

Answer 2

<强>父：

var ComponentA = React.createClass({
    getInitialState: function() {
        return {
            isClicked: false
        }
    },

    onClick: function() {
        this.setState({ isClicked: !this.state.isClicked });
    }),

    render() {
        return (
            <div className={this.state.isClicked ? "component clicked" : "component"}>
                <ComponentB isClicked={this.state.isClicked}/>
            </div>
        );
    }
});

儿童：

var ComponentB = React.createClass({ getDefaultProps: function() { return { isClicked: false } }, render() { return ( <div className={this.props.isClicked ? "subComponent clicked" : "subComponent"}> I am the subComponent </div> ); } });

如何让子组件CSS类对父组件CSS类作出反应？

2 个答案: