如何讓子組件CSS類對父組件類有反應？

我試圖讓我的頭與CSS組件的場景：我有一個使用自己的類的反應組件。這個組件有一個輔助子組件，它也有它自己的類。現在：當主組件中的特定狀態被設置並且應用了特定的類時，輔助組件的css應該對該類作出反應。如何讓子組件CSS類對父組件類有反應？

例如：

組件A使用組分B展示一些東西。
成分A被點擊上並反應集的「點擊」該組件
組分B應然後視覺上該類

在平原CSS（或類似）我會做此反應上-class：

組分A：

.component { 
    height: 10px; 
} 

.component.clicked { 
    height: 5px; 
}

組分B

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

我知道有一種反應方式可以做到這一點。這種事情應該通過組件之間傳遞的狀態和道具來完成，以便完全避免這種情況。但是我現在正在重構一個仍然存在這些問題的項目，而且我沒有真正瞭解如何使用react-css-modules正確執行此操作。

順便說一句：我目前的解決方法使用：全球化，但我真的，真的想避免這種情況...

來源

2016-11-20 hurrtz

正如你所提到的，這樣使用的道具和狀態是正確的方式。並閱讀Flux架構。 Flux提供了一種簡單的方法來處理父組件和子組件之間的更多高級場景。 –

@ErangaKapukotuwa謝謝你的回答。我對反應和通量有很好的理解，這就是爲什麼我不尋求關於如何解決這個問題的反應方式的知識。我知道該怎麼做。我正在尋求有關如何解決react-css-components中描述的情況的知識。我描述的場景似乎很平凡，我不知道爲什麼我很難找到正確的答案。 – hurrtz

似乎我誤解了你的問題並侮辱你的知識。我非常抱歉。請發佈答案，如果你能找到它。我也熱衷於瞭解這一點。 –

組分B：

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

這應該這樣做。如果不是，我只是對CSS不好，或者對你的問題感到困惑。

來源

2016-11-20 02:43:41 Kymetica

對不起，但這不能解決我的問題。問題在於，對於react-css-modules，所有的CSS類都會被重寫爲隨機的東西，因此組件a和組件b因此會將類傳遞到絕對唯一的dom中，即使它們在樣式表中共享相同的類。 – hurrtz

家長：

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-20 03:04:58

我的專欄「我知道有這樣做的反應方式」完全反轉您的提議。雖然我很感謝您的努力，但我正在尋找一種僅與react-css-modules（不包括：local和global）兼容的解決方案。這是因爲所有的邏輯已經存在於CSS中，我目前沒有時間重構整個項目來利用反應方式。 – hurrtz

如何讓子組件CSS類對父組件類有反應？

回答

相關問題