Javascript 如何访问子组件中根组件的状态值

我已经创建了一个React应用程序。在此应用程序中，我创建了以下组件：

• 应用程序组件（根）：其中数据加载到状态
• 卡片列表组件：卡片列表，使用道具将数据传递给它
• 卡片组件：使用forEach将数据传递给卡片，卡片上有一个按钮
• CustomButton组件：作用类似于具有样式的按钮

我想要的是，当用户点击任何一张卡上的按钮时，每次都会增加一个数字。但我无法在这里访问数据

有人能帮忙吗

以下是卡片组件，供您参考：

class Card extends Component {

render() {
    return (
        <div className="tc bg-light-green dib br3 pa3 ma2 grow bw2 shadow-5">
            <h2>Votes: {this.props.votes}</h2>
            <div>
                <img src={this.props.pic} alt='Superstar'/>
                <div>
                    <h2>{this.props.name}</h2>
                    <p>{this.props.email}</p>
                </div>
            </div>
            <ActionButton btnText="Vote Now!" clickhandler={this.onVoteButtonClick}/>
        </div>
    );
}
onVoteButtonClick = (event) => {
    console.log('It was clicked : '+this.props.id);      
}

类卡扩展组件{
render（）{
返回(
投票：{this.props.vows}
{this.props.name}
{this.props.email}

);
}
onVoteButtonClick=（事件）=>{
console.log（'单击它：'+this.props.id）；
}

---

}

有两个选项，您应该进一步研究，看看哪些最适合您的需要：

（或类似的东西）

新版本在React 16中提供

这两种解决方案的要点都是独立于依赖组件树来管理应用程序状态。上下文API可以说更容易实现，而您现在会发现更多的例子来解释Redux方法，因为它现在仍然是最常见的解决方案。

如果您不想通过三个组件中的道具传递函数，您可以使用它。