时间戳

首页 > 解决方案 > 更新外部 React 组件

reactjs - 更新外部 React 组件

问题描述

我有一个用于在页面某处显示新闻的组件。你可以给新闻评分（给它打星）。

我在另一个显示一些新闻的地方有另一个组件。在该组件中，您也可以对新闻进行评分。我想News在<SomeComponentWhereNewsAreDisplayed />. 有没有办法做到这一点？

一些伪代码：

class SomeComponentWhereNewsAreDisplayed extends React.Component
{
    voteAndUpdateNewsComponent() {
         updateNewsComponent()
    }
    render() {
        return <div>
            ...
            <some functionality that allows to give a star to news onClick={this.voteAndUpdateNewsComponent}>
            ...
        </div>
    }
}

class News extends React.Component
{
    componentDidMount() {
        //..ajax request to get ratings, or taking it from localStorage, etc..
    }

    render() {
        return <div>
            {this.state.ratings.map(rating => { return <span>{rating.stars}</span>})
        </div>
    }
};

标签： reactjs

解决方案

您不需要为此使用状态容器。将 SomeComponentWhereNewsAreDisplayed 中的一个函数传递给 News，该函数更新 SomeComponentWhereNewsAreDisplayed 的状态，并附加到 News 中星级评分的点击处理程序。这会导致您的父级 (SomeComponentWhereNewsAreDisplayed) 及其子级重新呈现。

推荐阅读