根据其他组件的某些条件更改“ css”（在一个组件中）？ （反应）

Question

有两个互不相关的不同组成部分， 有没有一种方法可以根据其他组件中的某些条件来更改“ css”（在一个组件中）？

这两个组件属于一个层次结构（相同的层次结构） 一个组件位于层次结构的顶部，另一组件位于层次结构的底部， 在层次结构底部的组件中的一个条件下，有可能在另一个组件中（即在顶部）更改css

Answer 1

好吧，正如您在问题中所指出的，在某些情况下，您已更改了位于层次结构顶部的组件的css，由层次结构中最低的组件构成。

• 首先，您必须从最下面的组件到最上面的组件发送状态（或某些标志或变量）。为此，更好的方法是使用有助于状态管理的redux，并且通过使用redux，您可以在这些顶部和底部组件之间进行通信。

• 第二，要更改css，首先需要将所有css都内联，然后使用条件运算符根据redux的状态来应用css。

例如，我想根据redux的状态更改此div的背景颜色。

`<div style={ this.props.myVariable === true ? {backgroundColor: '#0f0f0f'}: null}></div>`

或者，如果您不想使所有CSS都内联，则可以制作两个单独的CSS类，并根据redux的状态应用CSS a。

例如，我有两类CSS：

`a1 {
background-color: 'red'
}
b1 { 
background-color: 'green'
}`

现在，当我的redux状态更改时，我必须应用b1类

`<div className={ this.props.myVaribale === true ? 'a1' : 'b1'}></div>`

编辑：错别字