TLDR;即使缺少 this.props 的属性,我也需要能够在 React 中渲染子组件。
我有一个使用 Yahoo's Flxubile 构建的 React 应用程序。该应用程序使用 WP REST API 从 Wordpress 站点获取数据。有时,API 中可能会丢失图像或其他内容,这会导致客户端崩溃。这是一个例子:
我有一个名为 Articles.js 的文件,它连接到保存我的文章的 ArticlesStore。然后,我为每一篇文章渲染一个 Article.js 并传递如下 Prop :
{ this.props.articles.map(function(el, index) {
return <Article key={index} article={el} />
})
}
这里一切正常,但是在我的 Article.js 中,当我尝试访问未设置的属性时,我得到以下信息:
Uncaught TypeError: Cannot read property 'sizes' of undefined
这是导致错误的行:
<img src={this.props.article.meta_fields.image.sizes.large} />
当文章中缺少图像时就会发生这种情况。我当然理解 javascript 错误,但如果 API/Store 中缺少图像 url,我想呈现 Article.js 组件事件。我尝试过以下解决方案,但它会导致太多困惑且无法控制:
- 如果我们有 Prop ,即条件集 {this.props.article.meta_fields.image ? this.props.article.meta_fields.image.sizes.large : "imagemissing.png"}
- 设置默认属性。这不起作用,因为从父级传递到子级的属性会覆盖 defaultProps。
也许我应该尝试其他方法,而不是将 Prop 从 parent 传递给 child ?有一个 ArticleStore 可以为每篇文章设置默认值吗?你会怎么做?
最佳答案
如果您想提供嵌套结构作为 prop(与 article
一样),您将希望能够依赖始终几乎相同的结构。在这种情况下,它不会,有时 meta_fields
没有 image
属性(正如您的 TypeError 所建议的那样)。
就您而言,我会考虑从文章对象中提取您在 Article
组件中实际需要/使用的内容,并将它们作为 props 传递。
假设您的Article
仅使用title
、body
和image
。然后将它们作为 props 传递。
<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.
}
有人可能认为额外的 props 在这里构成了更多的“困惑”,但考虑到在困惑和 TypeError
之间进行选择,我选择了困惑。
如果您不想重新发明轮子。像这样的嵌套结构中访问数据的问题以前已经解决过。
// Lodash
_.get(article, 'meta_fields.image.sizes.large', 'default_image.jpg')
// Ramda
_.pathOr('default_image.jpg', ['meta_fields', 'image', 'sizes', 'large'], article)
关于javascript - 即使缺少 prop,我怎样才能让我的 React 子组件呈现,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43606265/