Question

TLDR;我需要能够在React中呈现子组件，即使缺少this.props的属性。

我有一个使用Yahoo's 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：无法读取属性＆＃39;尺寸＆＃39;未定义的

这是导致错误的行：

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

当文章中缺少图像时会发生这种情况。我当然理解javascript错误，但是如果API / Store中缺少图像URL，我想渲染Article.js组件事件。我尝试过以下解决方案，但它会导致太多的混乱和无法控制：

条件设定，如果我们有道具，即 {this.props.article.meta_fields.image？ this.props.article.meta_fields.image.sizes.large：＆＃34; imagemissing.png＆＃34;}
设置defaultProps。这不起作用，因为从父级到子级的传递属性会覆盖defaultProps。

也许我应该尝试别的东西而不是将道具从父母传给孩子？有一个ArticleStore，我可以为每篇文章设置默认值吗？你会怎么做？

Answer 1

如果你想提供一个嵌套结构作为道具（与article一样），你将希望能够依赖于结构总是几乎相同。在这种情况下它不会，有时meta_fields没有image - 属性（正如您的TypeError建议的那样）。

在您的情况下，我会考虑从文章对象中提取您在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)

即使缺少道具，如何使我的React子组件渲染

1 个答案: