3

我们有一个 React Grid 组件，我们需要为所有 Grid 组件分配 Id。有什么建议我们该怎么做？组件片段如下所示：

<Grid 
    data={this.state.items}
    sortable={{
       allowUnsort: this.state.allowUnsort,
       mode: this.state.multiple,
       sortDir:this.state.sortDir
    }}
    sort={this.state.sort}
    onSortChange={this.sortChange}
    filterable={true}
    filter={this.state.filter}
    onFilterChange={this.filterChange}
    onPageChange={this.pageChange}
    total={this.state.total}
    skip={this.state.skip}
    pageSize={this.state.pageSize}
    pageable={this.state.pageable}
    scrollable={this.state.scrollable}
    //style={{ height: '500px' }}
  >
  <Column
    field="networkName"
    sortable={{
       allowUnsort: this.state.allowUnsort,
       mode: this.state.multiple ? 'multiple' : 'single',
    }}
    onSortChange={this.sortChange} title="Network Name" width="400px" cell={NetworkNameCell}  />
    <Column field="networkGroups" title="Network Groups" width="250px" id="networkGroupsId"/>
    <Column field="networkType" title="Network Type" width="250px" id="networkTypeId"/>
    <Column field="providersCount" title="Assigned Providers"  />
    <Column field="locationsCount" title="Assigned Locations"  />
    <Column cell={this.DeleteCommandCell} title="Action" sortable={false} filterable={false} />
    <span class="k-icon my-refresh-icon-class"></span>
</Grid>
4

2 回答 2

2

这不起作用，因为id需要在 HTML 元素上设置，而不是在某些自定义组件上。您可以查看文档以获取更多信息和支持的 html 属性列表。在 a 上设置它table应该会给你想要的结果。例如：

 <table id="myTable">
      <tr>
           <td> data </td>
      </tr>
 </table>

在您的情况下，您可以做的是更改您的实现<Grid/>并将其传播id到底层的根 html 元素。

于 2019-02-06T12:50:12.240 回答
1

您可以安装名为 uniqid 的 npm 包并将其导入页面顶部，如下所示：

import uniqid from 'uniqid'

然后作为 Grid 组件传递的道具，id={uniqid()} 这将为您的组件提供唯一的 id。这一切都假设您没有在地图中使用网格或其他一些循环函数来渲染它。如果您这样做，则循环数组的元素可以用作 id。

于 2018-09-19T05:39:12.980 回答