изменить "css" (в одном компоненте) на основе какого-либо условия в другом компоненте?(РЕАКТ)

Question

Есть два разных компонента, не связанных друг с другом, Есть ли способ изменить "css" (в одном компоненте) на основе некоторых условий в другом компоненте?

эти два компонента принадлежат иерархии (та же иерархия) один компонент находится вверху иерархии, а другой - внизу иерархии, при одном условии в компоненте, который находится внизу иерархии, можно изменить css в другом компоненте, т.е. вверху

Answer 1

Ну, как вы уже сказали в своем вопросе, что у вас есть изменение css компонента, который находится на вершине иерархии при некотором условии на самый нижний компонент в иерархии.

• Прежде всего вы должны отправить состояние (или некоторый флаг или переменную) от самого нижнего компонента к самому верхнему компоненту.Для этого лучше использовать redux, который помогает в управлении состоянием, и с помощью избыточности вы можете обмениваться данными между этими верхним и нижним компонентами.

• Во-вторых, чтобыизмените css, сначала вам нужно поместить все css в строку, а затем использовать условный оператор для применения css на основе состояния приведения.

Например, я хочу изменить цвет фонаэтого div в соответствии с состоянием приставки.

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

В качестве альтернативы, если вы не хотите делать все css встроенными, вы можете создать два отдельных класса css и применить css a в соответствии с состояниемredux.

Например, у меня есть два класса css:

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

, и теперь я должен применять класс b1, когда мое состояние редукса изменяется

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

EDIT: опечатки