任何人都可以帮助我如何编写 code.I 这行想要在 jsx 中使用地图

Question

我想在我的 Jsx 中使用 map 进行反应，但它有错误，因为我将它与三元表达式一起使用。谁能帮帮我？

{tf > 0 ? {products.map(product => <CartProduct key={product.id} productData={product}/>)} : ''}

Answer 1

{tf > 0 ? products.map(product => <CartProduct key={product.id} productData={product}/>) : null}

您需要删除 products.map 调用周围的块作用域 ({})，并且不要 return JSX 中的空字符串 ''；相反 return null.

Answer 2

您的语法有误。如果直接 returning，则不应使用大括号。大括号 {} 仅在您有一些 processing/calculations 要做然后不想 return 任何事情或者如果 return 某事而不是您编写的完整函数时使用.例如这里使用花括号：

const temp = () => {
  let a=20;
  console.log('a',a);
};

请注意，我不想 return 函数中的任何内容。

但是，如果您没有任何要处理的内容或想直接return您正在处理的内容，请使用圆括号()。

const temp = () => {
  let a = 20;
  console.log('a', a);

  return (
    <div>
      <h1>Hi</h1> there
    </div>
  );
};

注意我在上面return多行。

此外，如果您有多行代码到 return，则使用圆括号 ()，否则只是 return 值。

const temp = () => {
  let a = 20;
  console.log('a', a);

  return 'Hi';
};

在此三元运算符中，您正在 returning products.map(... 函数，并且对于每个产品，您正在 returning <CartProduct 组件。这是一条单独的语句（因为 map 是一个函数），所以您也不需要使用 round ()。所以，正确的代码写法是：

{tf > 0 ? products.map((product) => <CartProduct key={product.id} productData={product} />) : ''}

但是，如果您想对 single-lined return 语句使用 () 圆括号，您也可以这样做。

const temp = () => {
    let a = 20;
    console.log('a', a);
    return ('Hi');
};

因此，您还可以将代码重写为：

{tf > 0 ? (products.map((product) => <CartProduct key={product.id} productData={product} />)) : ''}

两种方式都正确。

Can anyone help how i can write this line of code.I want use map in jsx