Передача значения из одного компонента в другой, ReactJs?

Question

[Junior]

Всем привет! Скажите пожалуйста допустимо ли в Reactjs передавать значения из одного компонента в другой через глобальную переменную? В примере глобальная переменная color1. codepen.io/juniorCh/pen/ZOqLov Буду благодарен за любое альтернативное решение. Также интересует как бы вы задали стили инпутам, то есть, есть инпут с value=red и нужно, чтобы такой же background у него был.
Заранее благодарен за помощь)

Comments

[copal]

Тут с какой стороны смотреть.. Если цвет неизменен и задается через js, то можно его значение вынести в специальный объект с константами. И вот если для себя и маленькое приложение пишешь и все пофигу, то можно и прям в компоненте к нему обращаться. Если же хочется "правильности", то передаешь значение этого цвета в компонент там, где его инициализируешь.

И если можно все сделать стилями, то нужно делать стилями. Если не получается, то уже через js. А способов много, от обычного js и до css modules.

[napa3um]

Недопустимо. В идеологии реакта (точнее, флакса и его производных) предполагается, что всё изменяемое состояние приложения лежит в сторе. (Это помимо вопроса о целесообразности вообще выносить в глобальную переменную стилизацию, озвученного выше.)

[Andrew Chil]

napa3um: не совсем понял ... не могли бы написать пример в codepen, пожалуйста.

[napa3um]

Andrew Chil: https://facebook.github.io/flux/docs/overview.html

Answer 1

[Антон]

1) context
У главного компонента, например, App (или можно создать компонент-обертку, HOC), отдается childContext, в котором передаются нужные параметры.
2) храним конфиг в отдельном файле и подключаем где нужно
import { color } from 'config.js';

export default {
  color: 'red'
}

3) flux (redux и прочие)
создаем store, в котором будем хранить цвет
4) может, для этого вообще не нужен js. например, цвет можно задавать в less/sass или, если вам не нужно поддерживать старые браузеры, то есть нативные переменные в css:

:root {
  --color: red;
}
input {
  color: var(--color);
}

Comments

[Andrew Chil]

А как с "значения из одного компонента в другой"?