React 语义 UI 表显示和隐藏列

Question

在语义 UI React 表的 1.2.1 版中，我找不到任何用于显示或隐藏列的本机行为： https://react.semantic-ui.com/collections/table/#types-pagination

实际上，我没有使用列，而是使用行，如第一个示例所示：

<Table celled>
    <Table.Header>
      <Table.Row>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
        <Table.HeaderCell>Header</Table.HeaderCell>
      </Table.Row>
    </Table.Header>

    <Table.Body>
      <Table.Row>
        <Table.Cell>
          <Label ribbon>First</Label>
        </Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
      <Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
</Table>

我只需要使用标准的 hmtl css display none 吗？我会认为表格中会内置一些属性？

Answer 1

在反应中你可以使用状态管理来做到这一点。

例子：

1. 在构造函数中，创建

   this.state={hide:true}

如果要隐藏表格行，则在表格中，

这样写：

{
(this.state.hide==false)?null:<Table.Row>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
        <Table.Cell>Cell</Table.Cell>
      </Table.Row>
    </Table.Body>
}

它不会显示该行。 这是因为 React 渲染是基于状态的。

如果要隐藏，则必须将状态设置为 hide=true 即

this.setState({hide:true})