Question

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

应用程序组件（根）：将数据加载到状态的位置
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

您应该研究两个选项，以找出最适合您的需求：

Redux（或类似的内容）
React 16中提供了新的Context API。

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

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

1 个答案: