javascript - 如何在第一个反应组件中添加图像并使用地图功能在其余组件中忽略

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>
 )
}

标签： javascriptreactjsimageecmascript-6react-component

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>