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

Question

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

• 应用程序组件(根):数据加载到状态的位置
• CardList 组件:卡片列表，使用 props 将数据传递给它
• Card 组件:使用 forEach 向 Card 传递数据，并且有按钮
• 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. Redux (或类似的东西)
2. 新的Context API在 React 16 中可用。

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