У меня есть родительский компонент, у которого много дочерних компонентов (дочерний компонент - это пустой div с цветным фоном).
Я хочу изменить цвет дочернего элемента, но хочу убедиться, что я его делаю другой цвет, чем он уже есть - например. если ребенок синий, я хочу изменить его на другой цвет, отличный от синего.
Для этого я использую опору, чтобы установить начальный цвет и сохранить эту опору в состоянии ребенка.
Когда я затем нажимаю на div, чтобы изменить цвет, я хочу получить доступ к текущему цвету div, чтобы я мог исключить его из выбора, чтобы, конечно, выбрать из
1) Это считается нормальным делать в реакции? 2) Если да - может кто-нибудь объяснить, как я могу получить доступ к состоянию ребенка? 3) Если это не лучший подход, как мне решить эту проблему?
class ColourBoxes extends Component {
constructor(props) {
super(props)
this.state = {
}
this.newColour = this.newColour.bind(this)
}
static defaultProps = {
colours: ['#ff3860', '#498afb', '#fa8142', '#09c372', '#9166cc', '#ffdd57', '#ff4088']
}
newColour(oldColour) {
}
render() {
return(
<div>
<Box colour={'#09c372'} ref="child"/>
</div>
)
}
}
class Box extends Component {
constructor(props) {
super(props)
this.state = {currColour: this.props.colour}
}
render() {
return(
<div className="Box" style={{backgroundColor: this.props.colour}}></div>
)
}
}