javascript - 多复选框渲染

Question

我是 ReactJS 的新手。我正在构建一个基本应用程序，人们可以在指定日期范围内的每一天在两个选项之间进行选择。 It looks like this .我想在后期将复选框的值发送到 API。也许 100，也许 500 我不知道会有多少个复选框。

我尝试了几次都失败了。单击复选框时，所有列表都会重新呈现。当有 1000 个复选框时，重新渲染会花费很多时间并且浏览器越来越慢。

我的问题是，是否可以呈现单个复选框？如果没有，我该怎么办？

我正在使用 Semantic UI React，它是我的渲染函数。提前致谢。

render() {
    return (
        <Table>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell></Table.HeaderCell>
              <Table.HeaderCell>{gettext('Choice A')}</Table.HeaderCell>
              <Table.HeaderCell>{gettext('Choice B')}</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {this.state.datas.map((data, idx) => (
              <Table.Row key={idx}>
                <Table.Cell>
                  {data.date}
                </Table.Cell>
                <Table.Cell>
                  {data.choiceA == false &&
                    <div>{gettext("-")}</div>
                  }
                  {data.choiceB == false && data.choiceA == true &&
                    <Checkbox defaultChecked readOnly/>
                  }
                  {data.choiceB == true && data.choiceA == true &&
                    <Checkbox/>
                  }
                </Table.Cell>
                <Table.Cell>
                  {data.choiceB == false &&
                    <div>{gettext("-")}</div>
                  }
                  {data.choiceA == false && data.choiceB == true &&
                    <Checkbox defaultChecked readOnly/>
                  }
                  {data.choiceA == true && data.choiceB == true &&
                    <Checkbox/>
                  }
                </Table.Cell>
              </Table.Row>
              ))
              }
          </Table.Body>
        </Table>
    );
  }

数据

[
 {'date': '19.03.2017', 'choiceA': False, 'choiceB': False},
 {'date': '20.03.2017', 'choiceA': True, 'choiceB': False},
 ...
]

Answer 1

我认为您最好使用语义 ui 组件中的 checked 属性:

https://react.semantic-ui.com/modules/checkbox/

我会简化代码并像这样呈现复选框:

<Table.Cell>
     <Checkbox defaultChecked checked={data.choiceA} readOnly/>
</Table.Cell>
<Table.Cell>
     <Checkbox defaultChecked checked={data.choiceB} readOnly/>
</Table.Cell>

我怀疑所有这些条件语句都/正在导致性能问题。