在React.js中調用外部組件方法的正確方法

Question

假設我有三個組成部分：

• <ArticleFinder />
• <ArticleViewer />
• <RecentArticleList />

ArticleFinder是一個從服務器獲取文章列表並顯示它的組件。 如果用戶單擊列表項，將顯示<ArticleViewer />。

ArticleViewer是一個從服務器獲取單個文章並顯示它的組件。

LatestArticleList是一個組件，可從服務器獲取最近的10篇文章並進行顯示。 與ArticleFinder一樣，在用戶單擊時，列表項將顯示<ArticleViewer />，如果<ArticleViewer />已安裝，則<ArticleViewer />只需重新加載文章即可。

ArticleFinder和LatestArticleList組件正在接收簡短的文章數據，如下所示：

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

而且ArticleViewer將收到更具體的數據，例如：

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

這只是為了減少傳輸的大小，服務器將響應盡可能少的數據。 因此，對於顯示ArticleViewer的內容和文件以及其他內容，此組件必須調用了某種getData方法。

請注意，這三個組件可以同時存在，它們在屏幕上具有自己的范圍。 它們可以被包裹，但是它們仍在同一時間，同一屏幕中。

因此，在裝入ArticleViewer時，它將調用自己的getData方法並顯示結果，但是問題是，如果已經裝入ArticleViewer，則單擊從LatestArticleList或ArticleFinder中的列表將不會觸發ArticleViewer的getData，因為沒有卸載和裝入組件。

我為此使用了React Router 4.x，因此我可以重定向url，但是仍然無法在ArticleFinder和LatestArticleList中強制調用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> 。

Answer 2

您可以使用key prop創建一個全新的組件實例，這與您第一次使用該組件完全相同。

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

確保每個文章的ID都是唯一的。

請記住，您將不會使用現有組件，而最終會創建新組件。

Answer 3

React Router v4的方式是對商品視圖路由使用自定義渲染功能-

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

這將在路線更改時呈現一個新的ArticleViewer組件。