条件渲染表行反应

Posted 2023-02-22

【中文标题】条件渲染表行反应

【英文标题】：Conditional Rendering Table Rows React

【发布时间】：2019-07-27 16:52:50

【问题描述】：

我有一张包含许多行的表格，我正在将道具传递到其中。如果返回的道具是一个空字符串“”我不想渲染该行

    <Table.Body>

      <Table.Row>
        <Table.Cell>Producer</Table.Cell>
        <Table.Cell>props.producer</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>Country</Table.Cell>
        <Table.Cell>props.country</Table.Cell>
      </Table.Row>

      <Table.Row>
        <Table.Cell>Region</Table.Cell>
        <Table.Cell>props.region</Table.Cell>
      </Table.Row>

      <Table.Row>    
        <Table.Cell>Subregion</Table.Cell>
        <Table.Cell>props.subregion</Table.Cell>
      </Table.Row>

    </Table.Body>

以及它的渲染位置：

render() 
return (
//  <Container>
 <Grid>

    this.state.wines.length ? (
          <List>
            this.state.wines.map(wine => (
              <Grid>
               <DataWine header=wine.Wine producer=wine.Producer country=wine.Country region=wine.Region subregion=wine.Subregion/>

              </Grid>
            ))

          </List>
        ) : (
          <h3>No Results to Display</h3>
        )

因此，在此示例中，如果 JSON 为 Subregion 返回 ""，我不希望显示 Subregion: " " 的行进行渲染。提前致谢！

【问题讨论】：

props.subregions !== "" ? : null

不清楚您要的是什么。

显示完整的 DataWine 组件代码或渲染方法。？

【参考方案1】：

我不太确定您要的是什么。但我很确定您只需要使用&& 运算符，例如：

  props.region &&
  <Table.Row>
    <Table.Cell>Region</Table.Cell>
    <Table.Cell>props.region</Table.Cell>
  </Table.Row>