TA貢獻1784條經(jīng)驗 獲得超9個贊
您應(yīng)該在 Card.js 中替換以下代碼
<span>{item.categories.map((category) => category)}</span>和
<span>{item.categories.toString().replaceAll(',', ' / ')}</span>使用此解決方案，您不需要map()您的數(shù)組。
--
或者，您可以使用內(nèi)置的join()函數(shù)。在這種情況下，您的代碼如下所示：
<span>{item.categories.join(' / ')}</span>
TA貢獻1875條經(jīng)驗 獲得超3個贊
您可以使用 CSS 來獲得所需的結(jié)果。
我們使用:not()選擇器 on 并將其與 結(jié)合使用，:first-child以便僅將我們的樣式應(yīng)用于第一個元素之后的元素。從那里我們使用::before偽元素來應(yīng)用“|” 在元素的左側(cè)。
ul {
list-style: none;
}
li {
display: inline-block;
}
li:not(:first-child)::before {
content: "|";
}
<h2>Product 1</h2>
<ul>
<li> Cat 1 </li>
<li> Cat 2 </li>
<li> Cat 3 </li>
</ul>
<h2>Product 2</h2>
<ul>
<li> Cat 1 </li>
</ul>
TA貢獻1876條經(jīng)驗 獲得超6個贊
使用Array.join()而不是映射Card.js
import React from "react";
const Card = (props) => {
const { item } = props;
return (
<div>
<span>{item.categories.join(' / ')}</span>
</div>
);
};
export default Card;
舉報