我需要将一个 css 类应用到 LilCard 组件，而不是 BigCard 组件。我确实需要在同一个 map 函数中渲染它们，所以我找不到将“问题”类仅应用于 LilCard 的方法。
{results.map((item) => {
return (
<div className="problem"> <--- Here
{item.map((subitem, i) => {
if (i !== 0) {
return <LilCard article={subitem} />;
} else {
return <BigCard article={subitem} />;
}
})}
</div>
);
})}
html 看起来像这样，我希望 BigCard 用“col-lg-6 mb-5 mb-lg-0”类包装，而 LilCard 用“col-lg-6 pl-lg-4”包装"类。
<div class="row">
<div class="col-lg-6 mb-5 mb-lg-0">
<div class="entry2">
<a href="single.html"><img src="images/img_1.jpg" alt="Image" class="img-fluid rounded"></a>
<span class="post-category text-white bg-success mb-3">Nature</span>
<h2><a href="single.html">The 20 Biggest Fintech Companies In America 2019</a></h2>
<div class="post-meta align-items-center text-left clearfix">
<figure class="author-figure mb-0 mr-3 float-left"><img src="images/person_1.jpg"
alt="Image" class="img-fluid"></figure>
<span class="d-inline-block mt-1">By <a href="#">Carrol Atkinson</a></span>
<span> - February 10, 2019</span>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor laudantium
sed optio, explicabo ad deleniti impedit facilis fugit recusandae! Illo, aliquid, dicta
beatae quia porro id est.</p>
</div>
</div>
<div class="col-lg-6 pl-lg-4">
<div class="entry3 d-block d-sm-flex">
<figure class="figure order-2"><a href="single.html"><img src="images/img_2.jpg" alt="Image"
class="img-fluid rounded"></a></figure>
<div class="text mr-4 order-1">
<span class="post-category text-white bg-success mb-3">Nature</span>
<h2><a href="single.html">The 20 Biggest Fintech Companies In America 2019</a></h2>
<span class="post-meta mb-3 d-block">May 12, 2019</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor
laudantium sed optio.</p>
</div>
</div>
<div class="entry3 d-block d-sm-flex">
<figure class="figure order-2"><a href="single.html"><img src="images/img_3.jpg" alt="Image"
class="img-fluid rounded"></a></figure>
<div class="text mr-4 order-1">
<span class="post-category text-white bg-success mb-3">Nature</span>
<h2><a href="single.html">The 20 Biggest Fintech Companies In America 2019</a></h2>
<span class="post-meta mb-3 d-block">May 12, 2019</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor
laudantium sed optio.</p>
</div>
</div>
<div class="entry3 d-block d-sm-flex">
<figure class="figure order-2"><a href="single.html"><img src="images/img_4.jpg" alt="Image"
class="img-fluid rounded"></a></figure>
<div class="text mr-4 order-1">
<span class="post-category text-white bg-success mb-3">Nature</span>
<h2><a href="single.html">The 20 Biggest Fintech Companies In America 2019</a></h2>
<span class="post-meta mb-3 d-block">May 12, 2019</span>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo sunt tempora dolor
laudantium sed optio.</p>
</div>
</div>
</div>
</div>
谢谢大家。
答案 0 :(得分：0)
{results.map((item) => {
return (
<div> <--- Here
{item.map((subitem, i) => {
if (i !== 0) {
return <LilCard article={subitem className="problem"} />;
} else {
return <BigCard article={subitem} />;
}
})}
</div>
);
})}
我认为这就是你所需要的
或
{results.map((item) => {
return (
{item.map((subitem, i) => {
if (i !== 0) {
<div className="problem">
<LilCard article={subitem }
</div> />;
} else {
<div>
<BigCard article={subitem} />
</div>;
}
})}
);
})}
答案 1 :(得分：0)
试试这个：
{results.map((item) => {
return (
<>
{item.map((subitem, i) => {
if (i !== 0) {
return <div className="problem"><LilCard article={subitem} /></div>;
} else {
return <div><BigCard article={subitem} /></div>;
}
})}
</>
);
})}
编辑 在评论中的解释之后检查新答案：
const orderCards = () => {
const lilcards = [];
const bigcards = [];
{
results.map((item) => {
{
item.map((subitem, i) => {
if (i !== 0)
lilcards.push(<LilCard article={subitem} />)
else
bigcards.push(<BigCard article={subitem} />)
})
}
})
}
return(
<>
<div className="problem">{lilcards.map(lilcard=>{return lilcard})}</div>
<div >{bigcards.map(bigcard=>{return bigcard})}</div>
</>
);
}
你能看到我在这里做了什么吗？
答案 2 :(得分：0)
您基本上希望将子数组中的第一项显示为 BigCard，而其他项显示为 LilCard 组件（从评论部分更新。
我已更新我的代码以获得该行为。
CODESANDBOX 链接：
https://codesandbox.io/s/life-is-a-challenge-42vjj
工作代码片段：
const App = ()=>{
const articles = [
[
{
id: 1,
title: "test"
},
{
id: 2,
title: "test2"
},
{
id: 3,
title: "coucou"
}
],
[
{
id: 1,
title: "ekip"
},
{
id: 2,
title: "bjr"
}
]
];
return (
<div className="App">
{articles.map((array) => {
return array.map(({ id, title }) => {
const item =
id === 1 ? <BigCard title={title} /> : <LilCard title={title} />;
return item;
});
})}
</div>
);
}
const BigCard = ({title}) => {
return <article className="bigCard">I am a Big Card : {title}</article>;
};
const LilCard = ({title}) => {
return <article className="lilCard">I am a little Card {title}</article>;
};
ReactDOM.render(<App/>, document.getElementById("root"));.lilCard {
height: 100px;
width: 100px;
background: green;
margin: 0.5rem 0;
}
.bigCard {
height: 200px;
width: 200px;
background: orange;
margin: 0.5rem 0;
}<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>