如何使用map函数在第一个反应性组件中添加图像，而忽略其余组件中的图像
如何使用map函数在第一个反应性组件中添加图像，而忽略其余组件中的图像
提问于 2020-01-08 10:41:22
我试图使用json文件将内容添加到组件中，在该文件中，我只需要第一个组件具有封面图像，而其他组件则忽略它。
Schema: "TrackList": [
{
"CourseNo": "1",
"CourseName": "C++ Programming with DataStructures",
"CoverImg":"example.com/cover.jpg"
},
{
"CourseNo": "2",
"CourseName": "Competitive Programming"
},
{
"CourseNo": "3",
"CourseName": "Java"
}
]下面的代码按需要呈现，但它也会将空白图像添加到组件中，但第一个除外。
render(){
const { Data } = this.props;
const Courses = Data.TrackList.map(course => {
return (
<li>
<span>Course {course.CourseNo}</span>
<a href='#path-10'>{course.CourseName}</a>
<img src={course.CoverImg}/>
</li>
)
});
return(
<div className='col-md-4 right-pannel'>
<ul>
{Courses}
</ul>
</div>
)
}回答 3
Stack Overflow用户
回答已采纳
发布于 2020-01-08 10:44:07
Array.prototype.map使用当前数组索引(作为第二个参数)调用提供的回调函数。数组的第一个索引是0，所以只需要添加一些逻辑，确保只在索引等于0时才添加图像，如下所示：
const Courses = Data.TrackList.map((course, i) => {
return (
<li>
<span>Course {course.CourseNo}</span>
<a href='#path-10'>{course.CourseName}</a>
{ i === 0 && <img src={course.CoverImg}/> }
</li>
)
});下面是一个稍微修改过的代码版本，它变成了一个可运行的代码片段：
const Data = {"TrackList": [{"CourseNo": "1","CourseName": "C++ Programming with DataStructures","CoverImg":"example.com/cover.jpg"},{"CourseNo": "2","CourseName": "Competitive Programming"},{"CourseNo": "3","CourseName": "Java"}]}
const Courses = Data.TrackList.map((course, i) =>
<li>
<span>CourseNo: {course.CourseNo}</span>
<span> | CourseName: {course.CourseName}</span>
{ i === 0 && <span> | CoverImg: {course.CoverImg}</span> }
</li>
);
ReactDOM.render(
<div className='col-md-4 right-pannel'>
<ul>
{Courses}
</ul>
</div>,
document.body
);<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Stack Overflow用户
发布于 2020-01-08 10:47:10
或者更通用的解决方案可以是下面的代码，可以在您的数据中看到，其他对象没有CoverImg键。
const Courses = Data.TrackList.map(course => {
return (
<li>
<span>Course {course.CourseNo}</span>
<a href='#path-10'>{course.CourseName}</a>
{course.CoverImg && <img src={course.CoverImg}/>}
</li>
)
});Stack Overflow用户
发布于 2020-01-08 11:30:55
您可以使用&&只呈现具有图像的对象。
优化
每一行的-Unique键
可用图像路径的-&&条件
-another方法去除return(){}
代码
render() {
const { Data } = this.props;
const Courses = Data.TrackList.map(course => (
<li key={course.CourseNo}>
<span>Course {course.CourseNo}</span>
<a href="#path-10">{course.CourseName}</a>
{course.CoverImg && <img src={course.CoverImg} alt="imgicon" />}
</li>
));
return (
<div className="col-md-4 right-pannel">
<ul>{Courses}</ul>
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59644091
复制相关文章
相似问题
腾讯云开发者
