Question

让我们假设我有三个组成部分：

＆lt; ArticleFinder /＆gt;
＆lt; ArticleViewer /＆gt;
＆lt; RecentArticleList /＆gt;

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

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

RecentArticleList是一个从服务器获取最近10篇文章的组件，并显示它。与ArticleFinder一样，在用户点击后，列表项将显示＆lt; ArticleViewer /＆gt;，如果＆lt; ArticleViewer /＆gt;已安装，＆lt; ArticleViewer /＆gt;只需重新加载文章。

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的显示内容和文件以及其他文件，此组件必须调用someData的getData方法。

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

因此，当挂载ArticleViewer时，它会调用自己的getData方法并显示结果，但问题是如果已经挂载了ArticleViewer，则单击RecentArticleList中的列表或ArticleFinder将不会触发ArticleViewer的getData，因为组件未卸载并已挂载

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

无论如何，我是用某种技巧做到的。我刚刚检查了从React Router（this.props.params）收到的道具已经改变，然后像这样调用getData方法：

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

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

有没有办法更优雅地解决这个问题？特别是某些React喜欢（如果它存在的话）？

代码非常混乱，添加更多功能使得更难看，我想解决这个问题。我知道编程中没有答案，但我认为可能存在可读解决方案。

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

Answer 1

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

Answer 2

您可以使用key道具创建一个全新的组件实例，就像您第一次使用该组件一样。

<ArticleViewer {...yuorProps} key={id_of_article}/>

确保每篇文章的ID都是唯一的。

请记住，您不会使用现有组件，最终会创建新组件。

Answer 3

React Router v4方式是为Article View路径使用自定义渲染功能 -

<Match pattern="/:articleid" 
    render={({params}) => <ArticleViewer article={params.articleid} />}/>

这将在路线更改时呈现新的ArticleViewer组件。

在React.js

3 个答案: