javascript - React/Javascript If 语句在 map 内

Question

我正在尝试制作一个表格，该表格将根据从 map 函数派生的属性具有不同颜色的行:

       var tableData = this.state.data.map(attribute =>

            {if(attribute.duplicate.toString()== "true")
                return <tr className="table-success">;
            else
                return <tr className="table-warning">;
            }
                <td> {count++} </td>
                ...
                <td> {attribute.duplicate.toString()} </td>
            </tr>
       );

现在 var tableData 被传递到实际的表:

<div>
        <div>
            <table className="table">
                <tr className="thead-inverse">
                    <th> # </th>
                    ...
                    <th> duplicate </th>
                </tr>
                    {tableData}
            </table>

        </div>
    </div>

但我收到以下错误:

[INFO] Module build failed: SyntaxError: C:/Users/.../all.js: Unterminated JSX contents (78:14)
[INFO] 
[INFO]   76 | 
[INFO]   77 |             </div>
[INFO] > 78 |         </div>
[INFO]      |               ^

你知道问题是什么，或者有其他方法来实现我想要做的事情吗？

Answer 1

只需将条件逻辑移至 className 内或将其分配给变量，然后在 tr 内使用它。

   var tableData = this.state.data.map(attribute => 
       <tr className={attribute.duplicate.toString() == "true" ? "table-success" : "table-warning"}>
            <td> {count++} </td>
            ...
            <td> {attribute.duplicate.toString()} </td>
        </tr>
   );