时间戳

首页 > 解决方案 > 地图功能中的额外 div 包装器

arrays - 地图功能中的额外 div 包装器

问题描述

我需要为 React 中的第二个和第三个元素创建额外的 div 包装器

我使用地图功能，但我不知道如何修复它。这是一个沙箱https://codesandbox.io/s/ojz6lvqnp6

这是我需要实现的 我需要达到的目标

另一个画面： 另一个屏幕

标签： arraysreactjsecmascript-6

解决方案

您需要将渲染方法中的代码更改为

 if (index !== 0) {
    return (
      <div key={index} className="second_wrapper">
        <h1 >{index}</h1>
      </div>
    );
  } else ....

编辑：

您需要将代码更改为：

render() {
const { members } = this.state;
return (
  <div>
    <div className="first_wrapper">
      <h1 key={0}>{members[0].name}</h1>
    </div>
    <div className="second_wrapper">
      {members.map((m, i) => {
        if (i > 0) return <h1 key={i}>{m.name}</h1>;
      })}
    </div>
  </div>
);

}

新沙箱

推荐阅读