地图循环中的条件语句
在ReactJS中，我试图在地图循环中调用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语句？
首先，如果没有父容器，不能将多个兄弟元素作为JSX返回，除非将它们放入数组（尽pipe在React添加对返回片段的支持之前无法从render方法返回数组）。
这是无效的：
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,0的顺序传递给你的映射函数0, 2, 1 ，它不会重buildDOM来反映改变的顺序，而只是交换DOM节点（这是更快）。
这导致了为什么你不想使用index作为你的元素的关键，除非你知道他们的顺序不会改变。 假设您使用迭代索引作为您的键：
{items.map((item, index) => ( <div key={index}>Item #{index}</div> ))}
现在，如果你的项目改变顺序，它们将以相同的顺序输出（索引0将永远是第一个索引，索引1将永远是第二个索引，依此类推），但是在每个div内部具有不同的文本。 React会和真实的DOM做一个区别，注意每个div的值已经改变了，并且从零开始重buildDOM的整个块。
如果你的列表元素包含一些不在DOM中反映的状态，就像<input>一样，这会变得更糟。 在这种情况下，React将重buildDOM，但用户在这些字段中input的任何文本都将保持原来的位置！ 下面是Robin Pokorny的一个例子，演示了什么可能会出错（来源于本文 ）：
我猜你的条件为if是index % 2 == 1 ，它显示index是奇数时的标题
{index % 2 == 1 && ( <h1>Test Output/h1> )}
正式文件
但是在你的情况下，如果条件在{}内，你正在写这个。 这意味着，您现在正在编写JavaScript。 所以，只需使用JavaScript语法。
if(index % 2 == 1){ return( <div> <span dangerouslySetInnerHTML={{ __html: item }}></span> <h1>Test Output/h1> </div>); }
更新：正如Jaromanda指出的，你需要返回一个元素。 所以，将<span>和<h1>包装到<div>会给出一个单独的元素。