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

Question

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

• App组件(root)：将数据加载到状态的位置
• CardList组件:卡片列表，使用支持将数据传递给它
• 卡组件:使用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);      
}

}

Answer 1

你应该多研究两个选项，看看什么最适合你的需要：

1. 剩馀 (或类似的东西)
2. 新的上下文API可在React 16中使用。

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