即使缺少道具，如何使React子組件呈現

Question

TLDR； 即使缺少this.props的屬性，我也需要能夠在React中渲染子組件。

我有一個使用Yahoo的Flxubile構建的React應用程序。 該應用程序使用WP REST API從Wordpress網站獲取數據。 有時可能會丟失圖像或API中的其他內容，這會導致客戶端中斷。 這是一個例子：

我有一個名為Articles.js的文件，該文件連接到保存我的文章的ArticlesStore。 然后，我為每篇文章渲染一個Article.js，並傳遞如下道具：

{   this.props.articles.map(function(el, index) {                                           
      return <Article key={index} article={el} />
    })
}

此處一切正常，但是當我嘗試訪問未設置的屬性時，在我的Article.js中得到以下信息：

未捕獲的TypeError：無法讀取未定義的屬性“大小”

這是導致錯誤的行：

<img src={this.props.article.meta_fields.image.sizes.large} />

當文章中缺少圖像時，會發生這種情況。 我當然理解javascript錯誤，但是如果API /商店中缺少圖片網址，我想呈現Article.js組件事件。 我已經嘗試了以下解決方案，但它會導致混亂和無法控制：

1. 條件集，如果我們有道具，即{this.props.article.meta_fields.image？ this.props.article.meta_fields.image.sizes.large：“ imagemissing.png”}
2. 設置defaultProps。 這是行不通的，因為從父級傳遞到子級的屬性會覆蓋defaultProps。

也許我應該嘗試其他方法，而不是將道具從父母身上傳遞給孩子？ 是否有ArticleStore，可以在其中設置每篇文章的默認值？ 你會怎么做？

Answer 1

如果您想提供一個嵌套結構作為prop（就像article ），您將希望能夠依賴結構幾乎總是相同的。 在這種情況下，不是這樣，有時meta_fields沒有image meta_fields （如您的TypeError建議）。

在您的情況下，我將考慮從article對象中提取出您在Article組件中實際需要/使用的東西，並將其作為道具傳遞。

假設您的Article僅使用title ， body和image 。 然后將它們作為道具傳遞。

<Article title={ article.title } body={ article.body } image={ getImage(article) }/>

function getImage(article) {
    if (article.meta_fields.image
     && article.meta_fields.image.sizes
     && article.meta_fields.image.sizes.large
    ) {
        return article.meta_fields.image.sizes.large;
    }
    return 'default_image.jpg'; // Or whatever you want.
}

有人可能會認為多余的道具在這里構成了更多的“雜物”，但是鑒於雜物和TypeError之間的選擇，我選擇了雜物。

而且，如果您不想重新發明輪子。 以前已經解決了以這種嵌套結構訪問數據的問題。

// Lodash
_.get(article, 'meta_fields.image.sizes.large', 'default_image.jpg')
// Ramda
_.pathOr('default_image.jpg', ['meta_fields', 'image', 'sizes', 'large'], article)