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

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

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

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

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

ArticleFinder和RecentArticleList组件正在接收以下简短的文章数据：

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

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

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

ArticleViewer将收到以下更具体的数据：

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

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

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

事实上，即使刷新页面，它也能工作，但我不喜欢它，它不直观，不优雅，至少对我来说是这样

有没有办法更优雅地解决这个问题？特别是，某种反应，就像它存在一样

代码非常混乱，添加更多功能会使代码更加难看，我想解决这个问题。我知道编程中并没有答案，但正如我所想，可以有可读的解决方案

任何建议都将不胜感激。谢谢

您可以使用key-prop创建组件的全新实例，就像您第一次使用组件一样

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

确保每个项目的id都是唯一的

---

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

这些组件之间似乎共享状态和功能。您可以将此状态移动到包含这三个组件的组件，只需将要显示的文章传递到您的中。

React Router v4的方法是为文章视图路由使用自定义呈现功能-

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

---

这将在路线更改时渲染新的ArticleViewer组件。

您的解决方案看起来不错，但在我的情况下，这会产生另一个问题：动画。我没有提到动画，但是ArticleViewer已经卸载/装载了动画，比如slideup和down，创建新实例将生成两个不同的ArticleViewer，它们将同时制作动画。我觉得这可能有点奇怪，所以不适合我的情况。但是我会试试这个，谢谢！这是可行的，但正如我所料，它有一个动画问题。如果不需要动画，这将非常方便。谢谢陛下有趣的我从来没有这样想过。我试试看。谢谢我试过了，但没用。我刚刚为此制作了repo，所以请检查：我的错误，您需要ArticleView上的关键点，以便它在每次@Thunderbird正确时重新渲染，但这会像您所说的那样破坏动画。其他替代方案是将状态按@skAstro建议的首选方式移出，或者将getData移到外部组件中，该组件获取文章，然后将其转移到ArticleViewer组件。顺便说一句，您似乎已经在进行redux存储，因此您可以使用redux saga将其移出ArticleView组件：