我想在react中的Jsx中使用map，但它有错误，因为我将它与三元表达式一起使用。有人能帮我吗？
{tf > 0 ? {products.map(product => <CartProduct key={product.id} productData={product}/>)} : ''}
您的语法有错误。如果直接返回，则不应使用大括号。Curly{}大括号只在您有一些处理/计算要做，然后不想返回任何内容，或者如果返回某些内容而不是您编写的完整函数时使用。例如，在此处使用大括号：
const temp = () => {
let a=20;
console.log('a',a);
};
请注意，我不想在函数中返回任何内容。
但是，如果您没有任何要处理的内容或希望直接返回正在处理的内容，请使用圆括号()。
const temp = () => {
let a = 20;
console.log('a', a);
return (
<div>
<h1>Hi</h1> there
</div>
);
};
请注意，我返回了上面的多行。
此外，如果要返回多行代码，请使用四舍五入的()括号，否则只返回值。
const temp = () => {
let a = 20;
console.log('a', a);
return 'Hi';
};
在这个三元运算符中，您返回的是products.map(...函数，对于每个乘积，您返回<CartProduct分量。这是一个单独的语句(因为map是一个函数(，所以您也不需要使用round()。因此，编写代码的正确方法是：
{tf > 0 ? products.map((product) => <CartProduct key={product.id} productData={product} />) : ''}
但是，如果您想在单行返回语句中使用()圆括号，也可以这样做。
const temp = () => {
let a = 20;
console.log('a', a);
return ('Hi');
};
因此，您也可以将代码重写为：
{tf > 0 ? (products.map((product) => <CartProduct key={product.id} productData={product} />)) : ''}
这两种方法都是正确的。
{tf > 0 ? products.map(product => <CartProduct key={product.id} productData={product}/>) : null}
您需要删除products.map调用周围的块作用域({}(，并且不要在JSX中返回空字符串''；而是返回CCD_ 11。