地图功能中的额外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