条件包围元素React

Question

具有简单的react组件：

<Table>
  <TableBody>
    <TableCell>
      x
    </TableCell>
  </TableBody>
</Table>

如何有条件地将TableBody封装在另一个组件（例如Paper）中？我想到了类似下面的内容，但这似乎没有做到。

<Table>
  {paper && <Paper>}
  <TableBody>
    <TableCell>
      x
    </TableCell>
  </TableBody>
    {paper && </Paper>}
</Table>

Answer 1

如果要避免重复表主体的代码，可以将其分配给变量并使用它。

const content = (
  <TableBody>
    <TableCell>
      x
    </TableCell>
  </TableBody>
);

return (
  <Table>
    {paper ? <Paper>{content}</Paper> : content}
  </Table>
)