访问儿童的状态是否被认为是好的（最佳实践）？

Question

我有一个父组件，它有许多子组件（子组件是一个带有彩色背景的空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>
        )
    }
}

Answer 1

既然你已经问过这是否是最佳实践，答案是否定的。状态应该在组件本身内部使用。对于跨组件共享数据，应使用道具。您可以使用Redux或上下文API来实现您的目的。

Answer 2

我不认为你的方法适合REACT方式：组件的状态应该仅用于组件本身，即使可能，也应该被其他组件访问（我甚至不确定你是否会因为执行所以）。

在你的情况下，你应该提升你的状态，正如REACT官方文件所建议的那样。

基本上，您保留有关的信息

此外，通过在中包含状态

请注意，如果单击处理程序在中实现，这种方法是值得的。