Назначить идентификатор для компонентов React - PullRequest
Новая
       32

Назначить идентификатор для компонентов React

0 голосов
/ 19 сентября 2018

У нас есть компонент React Grid, и нам нужно назначить Id для всех компонентов Grid.Любые предложения, как мы можем это сделать?Фрагмент компонента показан ниже: 

<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>

Ответы [ 2 ]

0 голосов
/ 06 февраля 2019

Это не работает, потому что id необходимо установить для элемента HTML, а не для какого-либо пользовательского компонента.Вы можете проверить документы для получения дополнительной информации и списков поддерживаемых атрибутов HTML.Установка на table должна дать вам желаемый результат.Например: 

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

В вашем случае вы можете изменить реализацию <Grid/> и заставить ее распространять переданный id в базовый корневой HTML-элемент.

0 голосов
/ 19 сентября 2018

Вы можете установить пакет npm с именем uniqueid и импортировать его вверху своей страницы, например: 

import uniqueid from 'uniqueid'

А затем в качестве компонента prop to Grid передайте id={uniqid()} Это даст вашему компоненту уникальный идентификатор,Все это при условии, что вы не используете сетку внутри карты или какую-либо другую циклическую функцию для ее рендеринга.Если вы делаете это, то элемент вашего цикла может служить идентификатором.

...