Javascript 结束，然后在react中创建表行

我正在尝试这样做，以便我可以结束一个表行，然后在react环境中每三个单元格在表中创建一个新的行

return (
      <div>
        <input type="text" placeholder="Enter item to be searched" onChange={(e)=>this.searchSpace(e)} />
        <table class="d">
        <tr>
        {items.map((route, index) => {
                return (
                       <td>
                        <Card style={{ width: '18rem' }}>
                          <Card.Body>
                            <Card.Title key={index}>{route.name}</Card.Title>
                            <Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
                            <Card.Text>
                              Some quick example text to build on the card title and make up the bulk of
                              the card's content.
                            </Card.Text>
                            <Link to={`/~twrigley/item/${route.id}`}> Check it out </Link>
                          </Card.Body>
                        </Card>
                        </td>
                        {index % 3 === 2 ? </tr> : &nbsp;}
                        {index % 3 === 2 ? <tr> : &nbsp;}
                    )
            })}
        </tr>
        </table>
      </div>
    )

返回(
this.searchSpace（e）}/>
{items.map（（路线、索引）=>{
返回(
{route.name}
卡片字幕
一些快速的示例文本构建在卡片标题上，并构成大部分
卡片的内容。
过来看
{索引%3==2？：}
{索引%3==2？：}
)
})}
)

[错误][1]

目前，它抛出一个错误，说它不知道{令牌是什么

---

[1] ：

因此React希望有一个包装元素。您的

{index%…

位于

元素块之外

例如，这是有效的：

return (
    <tr>
        {true && <span>example</span>}
    </tr>
)

---

所以React期望有一个包装元素。您的

{index%…

位于

元素块之外

例如，这是有效的：

return (
    <tr>
        {true && <span>example</span>}
    </tr>
)

---

您只能从

映射返回单个根元素或元素数组

将您的返回换行为

或

（简写）要提供一个分组根元素，这样就不会产生额外的HTML。你不能有条件地关闭JSX标记，你必须呈现整个东西，或者不呈现任何东西。事实上，这是一件非常好的事情，我们不能，以这种方式生成HTML的旧PHP代码是调试和维护的噩梦……你必须只返回一个根元素或一个el数组

地图中的要素

用

或

（简称）将报税表包装起来要提供一个分组根元素，这样就不会产生额外的HTML。你不能有条件地关闭JSX标记，你必须呈现整个东西，或者什么都不呈现。事实上，这是一件非常好的事情，我们不能，以这种方式生成HTML的旧PHP代码是调试和维护的噩梦……期望返回的块始终具有打开和关闭状态标记-实际上，它不仅仅需要一个打开和关闭标记，它还与JSX的传输方式有关。JSX转换为

React.createElement

调用，因此无法有条件地结束标记。即使您同时返回开始和结束标记。即

{true&&}{true&&}{true&&}

仍将中断。希望返回的块始终有一个打开和关闭标记-它实际上不仅仅需要一个打开和关闭标记，它还与JSX的传输方式有关。JSX转换为

React.createElement

调用，因此没有可能有条件地结束标记。即使您同时返回开始和结束标记。i。e、

{true&&}{true&&}

仍将中断。

return (
    <>
        {true && <span>example</span>}
    </>
)

const grouped = []
items.forEach((route, index) => {
    if (index % 3 === 0) {
        grouped.push([])
    }
    grouped[grouped.length - 1].push(route)
})
return (
  <div>
    <input type="text" placeholder="Enter item to be searched" onChange={(e)=>this.searchSpace(e)} />
    <table class="d">
    {grouped.map((groupOfItems) => {
        return (
        <tr>
        {groupOfItems.map((route, index) => {
            return (
                   <td>
                    <Card style={{ width: '18rem' }}>
                      <Card.Body>
                        <Card.Title key={index}>{route.name}</Card.Title>
                        <Card.Subtitle className="mb-2 text-muted">Card Subtitle</Card.Subtitle>
                        <Card.Text>
                          Some quick example text to build on the card title and make up the bulk of
                          the card's content.
                        </Card.Text>
                        <Link to={`/~twrigley/item/${route.id}`}> Check it out </Link>
                      </Card.Body>
                    </Card>
                    </td>
                )
        })}
        </tr>
        )
    }
    </table>
  </div>
)