使用语义UI反应在表中显示布尔值

Question

我是React和语义UI反应的新手。我正在创建一个表，以显示来自mongo数据库的一些值，包括布尔值。列标题的定义如下：

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

并且表行的呈现方式如下：

{_.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，但该值未出现在表中。将activeFlag重新定义为String时，该值将出现在表中。布尔值可以显示在表格中吗？

Answer 1

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

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

由于activeFlag是真实的布尔值，而不是字符串或数字。

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

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

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

工作沙箱： https://codesandbox.io/s/semantic-ui-drag-table-rows-k45i