将所有这些放在一起

Question

在ReactJS中，我试图在map循环中调用if语句。一个示例代码是：

var items = ['abc', '123', 'doe', 'rae', 'me'];
return (
  <div>

       {items.map((item, index) => (
            <span dangerouslySetInnerHTML={{ __html: item }}></span>

            {index % 2:
                <h1>Test Output/h1>
            }

        ))}

  </div>
}

除了我不断收到他的错误：

 Module build failed: SyntaxError: Unexpected token, expected , (73:11)
web_1  | 
web_1  |   71 |                     <span dangerouslySetInnerHTML={{ __html: item }}></span>
web_1  |   72 |                     
web_1  | > 73 |                     {index % 2:
web_1  |      |                     ^

如何在循环中调用if语句？

Answer 1

首先，您不能将多个兄弟元素作为JSX返回而没有父容器，除非您将它们放入数组中（尽管您无法从render方法返回数组，直到React添加支持返回片段）。

这是无效的：

return (
  <div>First sibling</div>
  <div>Second sibling</div>
);

这些都是有效的：

return (
  <div>
      <div>First sibling</div>
      <div>Second sibling</div>
  <div>
);

// vs.
// (notice this requires adding keys)

return ([
  <div key={1}>First sibling</div>,
  <div key={2}>Second sibling</div>
]);

其次，如果你想使用条件语句来渲染组件，你必须这样做：

{(index % 2 === 0) &&
  <div>This will render when index % 2 === 0</div>
}

这样做的原因是，如果第一个操作数是真的，则JavaScript中的&&运算符将计算到第二个操作数（在本例中为JSX）。您也可以使用三元语句，如下所示：

{(index % 2 === 0) ?
  <div>This will render when index % 2 === 0</div>
:
  <div>This will render when index % 2 !== 0</div>
}

将所有这些放在一起

var items = ['abc', '123', 'doe', 'rae', 'me'];
return (
  <div>

       {items.map((item, index) => (
            <div>
                <span dangerouslySetInnerHTML={{ __html: item }}></span>

                {(index % 2 === 0) &&
                    <h1>Test Output/h1>
                }
            </div>

        ))}

  </div>
}

[编辑]重要提示

我应该提到的是，无论何时使用items.map(...)等内容渲染元素数组，您都应该为列表中的每个元素分配一个唯一的键，以便呈现：<\ n / p>

{items.map((item, index) => (
  <div key={item.get('id')}>Item #{index}</div>
))}

原因是React在这里做了一些优化，使渲染（和重新渲染）列表成本更低。如果它看到一个曾经由键0, 1, 2组成的列表，并且您已经完成了一些操作来重新排序您所在州的项目，那么现在按键顺序将键传递给您的map函数{{ 1}}，它不会重建DOM以反映更改的顺序，而只是交换DOM节点（这更快）。

这导致您不希望使用0, 2, 1作为元素的关键字，除非您知道他们的订单不会发生变化。我们假设您使用迭代索引作为键：

index

现在，如果您的商品更改了订单，他们将以相同的顺序输出密钥（索引{items.map((item, index) => ( <div key={index}>Item #{index}</div> ))}将始终是第一个索引，索引0将始终是第二个索引，等等）但每个div内有不同的文本。 React将使用真实DOM进行差异，注意每个div的值已经改变，并从头开始重建DOM的整个块。

如果您的列表元素包含状态未在DOM中反映的内容（如1），情况会更糟。在这种情况下，React将重建DOM，但用户在这些字段中输入的任何文本都将保持原样！以下是来自 Robin Pokorny 的示例，它演示了哪些内容可能出错（来自this article）：

https://jsbin.com/wohima/edit?js,output

Answer 2

我猜你的条件是index % 2 == 1，当index是奇数时显示标题

{index % 2 == 1 && (
     <h1>Test Output/h1>
)}

Official Documentation

但在你的情况下，如果条件在{}内，你就是在写这个。这意味着，您现在正在编写JavaScript。所以，只需使用JavaScript语法。

if(index % 2 == 1){
   return(
    <div>
      <span dangerouslySetInnerHTML={{ __html: item }}></span>
      <h1>Test Output/h1>
    </div>);
}

更新：正如Jaromanda指出的那样，你需要返回一个元素。因此，将<span>和<h1>包裹到<div>中会产生一个元素。

Map Loop中的条件语句

2 个答案:

将所有这些放在一起

[编辑]重要提示