使用 semantic-ui-react 在 table 中显示布尔值

Question

我是 React 的新手并且 semantic-ui-react。我正在创建一个 table 来显示来自 mongo 数据库的一些值，包括一个布尔值。 header 列定义如下：

<Table.HeaderCell
  width={2}
  textAlign="center"
  sorted={column === "activeFlag" ? direction : null}
  onClick={this.handleSort("activeFlag")}
  >
 Active
</Table.HeaderCell>

table 行呈现如下：

{_.map(data, ({ repoName, repoDesc, activeFlag }, index) => (
     <Table.Row className="devRow" key={index} active onClick={e => this.updateRepo(index)}>
        <Table.Cell>{repoName}</Table.Cell>
        <Table.Cell>{repoDesc}</Table.Cell>
        <Table.Cell textAlign="center">{activeFlag}</Table.Cell>
      </Table.Row>
     )
  )}

activeFlag 最初定义为布尔值，默认值为 false，但该值并未出现在 table 中。当 activeFlag 被重新定义为 String 时，该值出现在 table 中。布尔值可以在 table 中显示吗？

Answer 1

此行未显示任何内容的原因，

<Table.Cell textAlign="center">{activeFlag}</Table.Cell>

是因为 activeFlag 是一个真正的布尔值而不是字符串或数字..

因此，要在模板中显示任何布尔值，您可以使用以下内容，

<Table.Cell textAlign="center">{String(isActive)}</Table.Cell>

如果要显示文字 "true" 或 "false" 则应将其转换为字符串然后显示。

Working Sandbox: https://codesandbox.io/s/semantic-ui-drag-table-rows-k45i

使用 semantic-ui-react 在 table 中显示布尔值

Show boolean values in table using semantic-ui-react

reactjs

semantic-ui-react