React semantic UI table 显示和隐藏列

Question

在语义 UI React table 的 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 显示 none？我原以为 table?

中会内置一些属性

Answer 1

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

示例：

在构造函数中，创建

this.state={隐藏:真}

在 table 如果你想隐藏一个 Table 行，

这样写：

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

React semantic UI table 显示和隐藏列

React semantic UI table show and hide columns

reactjs

semantic-ui

semantic-ui-react