访问一个子组件的状态被认为是可以的（最佳实践）吗？

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

我认为你的方法不符合REACT的方式：一个组件的状态应该只用于组件本身，而且，即使可能，它也应该被其他组件访问（我甚至不确定你这样做是否会最终出现异步问题）。

在你的情况下，你应该 提升你的国家如REACT官方文档所推荐的那样。

基本上，你保留了关于 <Box> 内色 <ColorBoxes> 组件：任何时候，在 <ColorBoxes> 将会改变，新的道具将到达你的。<Box>的组件，使他们改变颜色。

此外，通过在 <ColorBoxes>你可以检查新的颜色是否与当前颜色相同。

请注意，如果你的点击处理程序是用以下方式实现的，那么这种方法是值得的 <ColorBoxes>相反，万一它在 <Box>.. 好吧，那你就用 this.state.currColour 来检查新颜色是否与当前颜色不同。

Answer 2

既然你问这是否是最佳实践，答案是NO。状态是要在组件本身内部消耗的。对于跨组件共享数据，应该使用道具。你可以使用Redux或者Context API来实现你的目的。