对React的构成渲染和执行

Question

I我在我的React应用中使用材料数据词，并希望在没有null或未定义的情况下有条件地渲染以下部分。我也可以不执行

data

行也可以。

Object.entries(data).map(x => (

，我该怎么做？

Answer 1

<TableBody >
{
    Object.entries(data).map(x => (
      <TableRow key={x[0]}>
        <TableCell className="tableCell">{x[0]}</TableCell>
        <TableCell className="tableCell">{x[1]}</TableCell>
      </TableRow>
    ))
}
</TableBody>

如果您想编写条件操作员

<TableBody >
{
  data && Object.entries(data).map(x => (
    <TableRow key={x[0]}>
      <TableCell className="tableCell">{x[0]}</TableCell>
      <TableCell className="tableCell">{x[1]}</TableCell>
    </TableRow>
   ))
 }
 </TableBody>

有两个操作，您可以在条件下渲染组件施加。

Answer 2

<TableBody >
 {
  data ?  Object.entries(data).map(x => (
     <TableRow key={x[0]}>
      <TableCell className="tableCell">{x[0]}</TableCell>
      <TableCell className="tableCell">{x[1]}</TableCell>
     </TableRow>
   ))
   : null

 }
</TableBody>

在JS中，一个古怪的行为是，如果

<expression> && <true>
1. 评估为

   <expression>

   ，则返回第二个表达式。如果您不想渲染任何内容，则可以使用此功能。 true

   如果您想在任何情况下施用某些东西，这很有用。这称为三元运算符，您可以将其视为返回

   <true>

   -或

   <expression>表达式的内联if-else语句，具体取决于false

   评估的内容。
   

   现在，要检查您的数据是否有效，JS具有另一个有用的功能：

   真实/虚假值
。
2. <expression> ? <true> : <false>（空字符串），<true>

   ，

   <false>

   ，

   <expression>

   如果在逻辑表达式中使用，则将其粘在

   ""
值中。因此，您只需通过将您的

0

对象放入null来检查数据是否有效。而且由于这成为逻辑值，因此您可以在

undefined

开头使用false切换值。

一些例子：

data

仅验证数据是否存在

<expression>