我有一个从API获取内容的组件。 有时信息并不完整，所以我决定用OR操作符为我的组件提供备份数据。 它可以很好地代替imgjsx元素:
import React from 'react';
import placeholderImg from '../placeholderImg.png';
const ArticleCard = props => {
const { urlToImage, author, title, description, publishedAt } = props.news;
return(
<div className='ArticleCardContainer'>
<div className='ArticleCardImgContainer'>
<img className='ArticleCardImg' alt="article" src={urlToImage || placeholderImg}/>
</div>
<div className='ArticleCardInfoContainer'>
<h2 className='ArticleCardTitle'>{title || 'No Title'}</h2>
<span className='ArticleCardBy'>By {author || 'Author unknown'} on {publishedAt || 'Unknown'}</span>
<p className='ArticleCardContent'>{description}</p>
</div>
</div>
)
};
//NOTE: I didn't used default props here because all solutions for nested default props were seem to tricky and risky
export default ArticleCard;
问题是它对图像不起作用。
我还尝试使用defaultprops，但在我看来，它对于嵌套对象太棘手了，所以我决定对这个小组件使用OR运算符（我希望它是好的）。
我收到图像。 我测试过了，所以这是个逻辑问题。
我猜您提供了src的直接路径，相反，您应该要求它，这样webpack才能解析映像路径:
const ArticleCard = (props) => {
const {
urlToImage,
author,
title = "No Title",
description,
publishedAt = "Unknown",
} = props.news;
return (
<div className="ArticleCardContainer">
<div className="ArticleCardImgContainer">
<img
className="ArticleCardImg"
alt="article"
src={require(urlToImage) || placeholderImg}
/>
</div>
<div className="ArticleCardInfoContainer">
<h2 className="ArticleCardTitle">{title}</h2>
<span className="ArticleCardBy">
By {author} on {publishedAt}
</span>
<p className="ArticleCardContent">{description}</p>
</div>
</div>
);
};
