如何设置或控制从ReactJS中数组的列表/键保存的元素的样式？

我想创建一个2x3网格。网格将由包含不同信息的单个组件组成。每个组件都有一个图像、图像alt、标题和描述。同样，每个组件都位于2x3网格内

我成功地使每个组件显示在彼此的顶部。但我希望他们是成对的。我尝试使用.map函数迭代列表，并成功地获得了元素转储。我不知道如何单独控制组件，因为我所做的是元素的列表转储。我不知道如何使用CSS，因为我无法控制

<component />

它现在都是{webItems}转储

// From App.js

    function App() {
      const webItems = webImages.map(item => <WebItem key={item.id} item={item} />);
      return <div>{webItems}</div>;
    }

    // From WebItem.js

    function WebItem(props) {
      return (

            <div className="webItem" key={props.item.id}>
              <img src={props.item.imageURL} alt={props.item.imageAlt} />
              <h3>{props.item.imageTitle}</h3>
              <p>{props.item.imageBlurb}</p>
            </div>

      );
    }

//There is an external file using a webImages variable as an array holding objects of individual, key, imageURL, imageAlt, imageTitle and imageBlurb info.

---

我不确定是否有CSS或react JS技术来解决这个问题。我只希望每个图像和它自己的描述信息是在一个2x3网格。如果可能的话，我也希望能够对每一个进行样式设置。

您面临的问题是，您将6个div堆叠在一起。但你需要一个网格状的结构。一种方法是将每一对放在一个div中并使用display:flex

我已经编写了将一个数组分组为2个数组的代码，这样在渲染时就更容易了

constwebimages=[1,2,3,4,5,6]； 功能应用程序{ // [[1, 2], [3, 4], [5, 6]] const groupedItems=webImages.reducegroup，item，idx，arr=>{ 如果idx%2==0{ groups.pusharr.sliceidx，idx+2； } 返回组； }, []; const webItems=groupedItems.map[item1，item2]=> ; 返回{webItems}； } 功能WebItemprops{ 返回{props.item}； } ReactDOM.render、document.getElementByIdroot； .行{ 显示器：flex； } .webItem{ 身高：5雷姆； 宽度：5雷姆； 边框：1px实心； 背景：浅蓝色； }

---

如果我正在使用{id:1}、{id:2}、{id:3}、{id:4}、{id:5}、{id:6}，我该如何检查是否使用了您的代码？你可能已经知道，这些最终会成为关键。有没有办法钩住id来检查是否存在偶数？可以使用item.id而不是idx。但最好使用idx，因为它实际上保证它是有序的，比如0,1,2。。。