Javascript 使用事件对象时使两个组件水平放置在react中

我正在使用事件对象尝试创建三个相邻的图像。我遇到了一个问题，因为它们是按顺序返回的，所以当我希望它们排成两行时，它们保持垂直堆叠，每行三个项目

以下是我当前的App.js代码：

function App() {
  let imgGen = [{img:""},{img:""},{img:""},{img:""},{img:""},{img:""}];
  let images = imgGen.map((image1) => {
    return <GenSlide data={image1}/>
  });

  return (
    <div className="App">
      <Entry />
      {images}
    </div>
  );
}

函数应用程序（）{
设imgGen=[{img:”“}，{img:”“}，{img:”“}，{img:”“}，{img:”“}，{img:”“}]；
让images=imgGen.map（（image1）=>{
返回
});
返回(
{图像}
);
}

以下是我的GenSlide类代码：

function GenSlide (props) {
    return (
        <div class="imagePackage">
            <img alt="this image is busted" width="300px" src={props.data.image}/>
            <button id="theButton">Save</button>
        </div>
    )
}

功能GenSlide（道具）{
返回(
拯救
)
}

您应该使用flexbox或网格布局来完成此操作

默认情况下，div是一个块元素，它在每个元素前后放置换行符。如果将它们设置为“内联块”，它们之间仍会有间距

有关更多信息，请阅读是否尝试在

GenSlide

组件中使用

而不是

？