Map循环中的条件语句

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(...)类的元素来渲染元素数组时，您实际上应该为要渲染的列表中的每个元素分配一个唯一键：

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

原因是React在这里进行了一些优化，以降低渲染（和重新渲染）列表的成本。 如果它看到一个曾经由键0, 1, 2组成的列表，并且您已经完成了一些操作以对状态中的项进行重新排序，那么现在这些键将以0, 2, 1的顺序传递给地图函数。 0, 2, 1 ，它不会重建DOM来反映更改后的顺序，而只是交换DOM节点（速度更快）。

这导致了为什么您不想使用index作为元素的键，除非您知道它们的顺序不会改变。 假设您使用迭代索引作为键：

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

现在，如果您的项目更改顺序，则它们的键输出顺序相同（索引0将始终是第一个索引，索引1将始终是第二个索引，依此类推），但每个div内的文本不同。 React将对真实的DOM进行比较，注意每个div的值已更改，然后从头开始重建DOM的整个块。

如果您的列表元素包含状态未在DOM中反映的内容（例如<input> ，则情况将更加糟糕。 在这种情况下，React将重建DOM，但是用户在这些字段中输入的任何文本将保持原样！ 这是Robin Pokorny的示例，演示了可能出问题的地方（摘自本文 ）：

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

Answer 2

我猜您的条件是if index % 2 == 1 ，它在index为奇数时显示标题

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

官方文件

但就您而言，您正在{}中编写if条件。 这意味着您正在编写JavaScript。 因此，只需使用JavaScript语法。

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

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