时间戳

首页 > 解决方案 > React 语义 UI 表显示和隐藏列

reactjs - React 语义 UI 表显示和隐藏列

问题描述

在语义 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 吗？我会认为表中会内置一些属性？

标签： reactjssemantic-uisemantic-ui-react

解决方案

在反应中，您可以使用状态管理来完成。

例子：

  1. 在构造函数中，创建

    this.state={隐藏：真}

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

像这样写：

{
(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>
}

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

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

this.setState({hide:true})

推荐阅读