如何在第一个反应组件中添加图像并使用 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>
    );
  }

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

How to add an image in the first react component and ignore in rest of the components using map function

javascript

image

ecmascript-6

reactjs

react-component