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

Question

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

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

这是我需要达到的目标

另一个屏幕：

Answer 1

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

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

}

new sandbox