1

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

例如：

  • 组件 A 使用组件 B 来展示一些东西。
  • 组件 A 被点击并反应在该组件上设置一个“点击”类
  • 然后组件 B 应该对该类做出视觉反应

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

组分 A：

.component {
  height: 10px;
}

.component.clicked {
  height: 5px;
}

B组份

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

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

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

4

2 回答 2

0

B组份：

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


这应该这样做。如果不是，我只是不擅长 css，或者对你的问题感到困惑。

于 2016-11-20T02:43:41.480 回答
0

家长：

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>
        );
    }
});
于 2016-11-20T03:04:58.413 回答