如何在第一个反应组件中添加图像并使用 map 函数在其余组件中忽略

Question

我正在尝试使用 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>
 )
}

Answer 1

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>

Answer 2

或者更通用的解决方案可以是下面的代码，正如在您的数据中可以看到的，其他对象没有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>
      ) 
    });

Answer 3

您可以使用 && 放置条件以仅渲染具有图像的对象

优化

- 每一行的唯一键

-&& 可用图像路径的条件

-另一种删除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>
    );
  }