英文:
apply a class to every other element in react map data
问题
我想为.map函数中的每个其他元素应用一个类。原因是，与标准的并排网格列不同，我正在创建一个棋盘式的布局，因此我需要将每个其他项目的上边距调高。如何只为data.restaurants.map((restaurant, index) => (中的每个其他项目应用这样的样式呢？
要为data.restaurants.map((restaurant, index) => (中的每个其他项目应用样式，您可以使用CSS伪类选择器:nth-child(even)。这将选择每个偶数索引的项目，使您能够为它们应用不同的样式。
这是如何在您的代码中应用它的示例：
<div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4">
{status === "success" &&
delve(data, "restaurants") &&
data.restaurants.map((restaurant, index) => (
<div className={` ${index % 2 === 0 ? 'even-item' : 'odd-item'}`}>
{/* 其他内容 */}
<RestaurantCard
{...restaurant.attributes}
locale={locale}
key={index}
/>
</div>
))}
</div>
在上述代码中，我们使用了${index % 2 === 0 ? 'even-item' : 'odd-item'}来为每个偶数索引的项目应用even-item类，而为每个奇数索引的项目应用odd-item类。您可以根据需要自定义这些类的样式。
英文:
I have the below:
<div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4">
{status === "success" &&
delve(data, "restaurants") &&
data.restaurants.map((restaurant, index) => (
<div className=""> <---------------- i.e.
<RestaurantCard
{...restaurant.attributes}
locale={locale}
key={index}
/>
</div>
))}
</div>
I want to apply a class to every other element within my .map function. Reason is, as opposed to standard side by side grid column, I am creating a checkerboard type layout, so every other item I will need to margin up higher. How could I apply such a style to only other item in data.restaurants.map((restaurant, index) => ( ?
答案1
得分: 1
您可以根据索引应用条件性的 className。
例如，
<div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4">
{status === "success" &&
delve(data, "restaurants") &&
data.restaurants.map((restaurant, index) => (
<div className={"" + (index % 2 ? 'odd' : 'even')}> <---------------- i.e.
<RestaurantCard
{...restaurant.attributes}
locale={locale}
key={index}
/>
</div>
))}
</div>
英文:
You can apply conditional className according to your index.
For example,
<div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4">
{status === "success" &&
delve(data, "restaurants") &&
data.restaurants.map((restaurant, index) => (
<div className={"" + (index % 2 ? 'odd' : 'even')}> <---------------- i.e.
<RestaurantCard
{...restaurant.attributes}
locale={locale}
key={index}
/>
</div>
))}
</div>
答案2
得分: 1
如果是相同的样式，请将您的类添加到map内部的div中
<div className="YOURCLASS"> {/* 例如 */}
另外，如果您需要进行一些逻辑来应用该类
<div className={variable === 'something' ? CLASS1 : CLASS2}> {/* 例如 */}
您还可以将该类应用于您的组件
<RestaurantCard
{...restaurant.attributes}
locale={locale}
key={index}
style={styles...}
/>
然后在组件文件中应用该样式。
英文:
If is the same style, add your class in the div inside of the map
<div className="YOURCLASS"> <---------------- i.e.
Also if you need to make some logic to apply the class
<div className={variable === 'something' ? CLASS1 : CLASS2}> <---------------- i.e.
Also you can apply the class to your component
<RestaurantCard
{...restaurant.attributes}
locale={locale}
key={index}
style={styles...}
/>
And then apply that style in the component file
答案3
得分: 0
你可以使用模运算符（%）来检查索引是偶数还是奇数。根据这一点，你可以有条件地为不同的元素应用不同的类，从而创建一种模式或交替切换的逻辑。
根据你的示例：
<div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4">
{status === "success" &&
delve(data, "restaurants") &&
data.restaurants.map((restaurant, index) => (
<div className={index % 2 === 0 ? "even-item" : "odd-item"}>
<RestaurantCard {...restaurant.attributes} locale={locale} key={index} />
</div>
))}
</div>
英文:
You can use the modulus operator (%) to check if the index is even or odd. Based on that, you can conditionally apply different classes to alternate elements, creating a pattern or checker switching logic.
Based on your example:
<div className="grid md:grid-cols-2 sm:grid-cols-2 grid-cols-1 gap-16 mt-24 px-4">
{status === "success" &&
delve(data, "restaurants") &&
data.restaurants.map((restaurant, index) => (
<div className={index % 2 === 0 ? "even-item" : "odd-item"}>
<RestaurantCard {...restaurant.attributes} locale={locale} key={index} />
</div>
))}
</div>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论