Reactjs 在一个循环中反应物料UI 2表行错误

我正在React中进行第一个项目，但在正确呈现表时遇到问题。 我想要达到的是这个

绿色括号是我的循环中的内容。问题是REACT说我需要一个用于TableRow元素的包装器。我想我的包装就是我的桌子。我的表的返回方法如下所示

return(
            <div className="container">
                <Table>
                    <TableHead>
                        <TableRow>
                            {this.props.headers.map((el, i) => 
                                <TableCell key={i+3}>{el}</TableCell>
                            )}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                    {this.props.data.map((element, j) => 
                        <TableRow key={j+j+j+j+j}>
                            <TableCell key={element["Nr"]+j}>{element["Nr"]}</TableCell>
                            <TableCell key={element["Description"]+j}>{element["Description"]}</TableCell>
                            <TableCell key={element["Reference"]+j}>{element["Reference"]}</TableCell>
                            <TableCell key={element["Parameters"]+j}><FontAwesomeIcon data-index={j} className="font-awesome-icon info-icon" onMouseLeave={this.hideToolTip} onMouseEnter={this.showToolTip} icon={faInfoCircle} />
                                {toolTip[j]}
                            </TableCell>
                        </TableRow>
                        <TableRow> !!REACT WON'T ACCEPT  THIS SECOND TABLEROW!! </TableRow>
                    )}
                    </TableBody>
                </Table>

        </div>
        )

返回(
{this.props.headers.map（（el，i）=>
{el}
)}
{this.props.data.map（（元素，j）=>
{元素[“Nr”]}
{element[“Description”]}
{element[“Reference”]}
{工具提示[j]}
！！REACT不会接受第二个TABLEROW！！
)}
)

错误如下：

分析错误：相邻的JSX元素必须包装在封闭标记中。你想要一个JSX片段吗

到目前为止，我尝试将此循环的两个TableRows都包装在父TableRow中，但表行当然不能直接包含表行

非常感谢您的帮助

在react中，有些东西（几乎所有东西）需要相同的开始和结束标记才能有效，例如，返回值，这是有效的：

export default observer(() => {    
    return (
        <div>
            <h1>Hello</h1>
        </div>
    )
})

导出默认观察者（（）=>{
返回(
你好
)
})

这将在错误中重新查找

export default observer(() => {    
    return (
        <h1>Hello</h1>
        <div>                
        </div>
    )
})

导出默认观察者（（）=>{
返回(
你好
)
})

因此，您可以在循环中的所有代码周围使用

标记，或者简单地使用每个块的循环。这是有效的

export default observer(() => {    
    return (
     <React.Fragment>
        <h1>Hello</h1>
        <div>                
        </div>
     </React.Fragment>
    )
})

导出默认观察者（（）=>{
返回(
你好
)
})

你的代码带有片段

return(
            <div className="container">
                <Table>
                    <TableHead>
                        <TableRow>
                            {this.props.headers.map((el, i) => 
                                <TableCell key={i+3}>{el}</TableCell>
                            )}
                        </TableRow>
                    </TableHead>
                    <TableBody>
                    {this.props.data.map((element, j) => 
                       <React.Fragment>
                        <TableRow key={j+j+j+j+j}>
                            <TableCell key={element["Nr"]+j}>{element["Nr"]}</TableCell>
                            <TableCell key={element["Description"]+j}>{element["Description"]}</TableCell>
                            <TableCell key={element["Reference"]+j}>{element["Reference"]}</TableCell>
                            <TableCell key={element["Parameters"]+j}><FontAwesomeIcon data-index={j} className="font-awesome-icon info-icon" onMouseLeave={this.hideToolTip} onMouseEnter={this.showToolTip} icon={faInfoCircle} />
                                {toolTip[j]}
                            </TableCell>
                        </TableRow>
                        <TableRow> !!REACT WILL ACCEPT  THIS SECOND TABLEROW!! </TableRow>
                      </React.Fragment>
                    )}
                    </TableBody>
                </Table>

        </div>
        )

返回(
{this.props.headers.map（（el，i）=>
{el}
)}
{this.props.data.map（（元素，j）=>
{元素[“Nr”]}
{element[“Description”]}
{element[“Reference”]}
{工具提示[j]}
！！REACT将接受第二个TABLEROW！！
)}
)

没有尝试，但您可以尝试用

元素包装它。您是对的！应该是答案而不是评论。非常感谢！不客气；）我把它作为评论发布，因为我没有验证它，只是猜测谢谢你。要添加的一点是，显然React.Fragment也需要一个唯一的键。除此之外，它是完美的，谢谢！