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

Posted 2023-02-23

【中文标题】如何在子组件中访问根组件的状态值

【英文标题】：how to access value of state of Root Component in the child component

【发布时间】：2019-01-17 06:34:16

【问题描述】：

我创建了一个 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);      

【问题讨论】：

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

【参考方案1】：

您应该更多地研究两个选项，以了解最适合您需要的选项：

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

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