1

CSS コンポーネントを使用したシナリオに頭を悩ませようとしています。独自のクラスを使用する反応コンポーネントがあります。このコンポーネントには、独自のクラスを持つ小さなヘルパー サブコンポーネントがあります。現在: メイン コンポーネントの特定の状態が設定され、特定のクラスが適用されると、ヘルパー コンポーネントの css がそのクラスに反応する必要があります。

例えば：

  • コンポーネント A はコンポーネント B を使用して何かを表示します。
  • コンポーネント A がクリックされ、react がそのコンポーネントに「クリックされた」クラスを設定します
  • コンポーネント 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 に答える