javascript - 在 React.js 中调用外部组件方法的正确方法

Question

假设我有三个组件:

• <文章查找器/>

ArticleFinder是一个从服务器获取文章列表并显示的组件。如果用户单击列表项，将显示 。

ArticleViewer 是一个从服务器获取单个文章并显示它的组件。

RecentArticleList 是一个从服务器获取最近 10 篇文章并显示的组件。与 ArticleFinder 类似，用户单击列表项时将显示 ，如果 已安装，则 只需重新加载文章即可。

ArticleFinder 和RecentArticleList 组件正在接收如下简短文章数据:

[{ _id: 1, title: 'Helloworld', date: '...' }, { _id: 2, title: 'Farewell!', date: '...' }]

ArticleViewer 将收到如下更具体的数据:

{ _id: 1, title: 'Helloworld', date: '...', content: '<p>Helloworld!</p>', files: [ ... ], tags: [ ... ] }

这只是为了减少传输的大小，服务器将响应尽可能少的数据。因此，为了显示来自 ArticleViewer 的内容和文件以及其他内容，该组件必须调用某种 getData 方法。

请注意，这 3 个组件可以同时存在，它们在屏幕上有自己的范围。它们可以被包裹起来，但它们仍然在同一时间、同一屏幕上。

所以当ArticleViewer挂载时，它会调用自己的getData方法并显示结果，但问题是，如果ArticleViewer已经挂载，点击RecentArticleList或ArticleFinder中的列表将不会触发ArticleViewer的getData，因为组件没有卸载和挂载.

我正在使用 React Router 4.x，因此我可以重定向 url，但仍然无法在 ArticleFinder 和RecentArticleList 中强制调用 ArticleViewer.getData。

不知何故，我用了某种技巧做到了。我刚刚检查了从 React Router(this.props.params) 接收到的 props 已更改，然后调用 getData 方法，如下所示:

componentWillReceiveProps(nextProps, nextState) {
    if(nextProps.location.pathname !== prevPath) {
        prevPath = nextProps.location.pathname;
        this.getArticles(category, search);
    }
}

它实际上正在工作，即使刷新页面，但我不喜欢它，它不直观，不优雅，至少对我来说。

有没有办法更优雅地解决这个问题？特别是某种类似 React 的东西(如果存在的话)？

代码非常困惑，添加更多功能会变得更加难看，我想解决这个问题。我知道编程中没有答案，但正如我认为的，可以存在可读解决方案。

任何建议都会非常感激。谢谢!

Answer 1

这些组件似乎在它们之间共享状态和功能。您可以将此状态移至包含这三个组件的组件，然后将要显示的文章传递到您的 <ArticleViewer> 中。 .