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

Question

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

这是我当前的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>
);
}

这是我的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>
)
}

Answer 1

您应该使用flexbox或网格布局来实现这一点。

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

欲了解更多信息，请阅读https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/The_box_model