时间戳

首页 > 解决方案 > 条件封闭元素 React

reactjs - 条件封闭元素 React

问题描述

有一个简单的反应组件：

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

如何有条件地将 TableBody 包含在另一个组件（例如 Paper）中？我想到了类似下面的东西，但这似乎并没有做到。

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

标签： reactjsmaterial-ui

解决方案

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

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

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

推荐阅读