Назначьте идентификатор компонентам React
У нас есть компонент React Grid, и нам нужно назначить идентификатор для всех компонентов 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>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете установить пакет npm под названием uniqid и импортировать его вверху страницы следующим образом:
import uniqid from 'uniqid'
А затем в качестве опоры для компонента Grid передайте id = {uniqid()}
Это даст вашему компоненту уникальный идентификатор. Все это при условии, что вы не используете сетку внутри карты или какую-либо другую функцию цикла для ее визуализации. Если вы это делаете, то элемент вашего массива цикла может служить идентификатором.
Что значит фиксированный идентификатор? Можете ли вы отредактировать свой вопрос и добавить немного кода, скажем, целый файл?
Хорошо, вопрос отредактирован. Фиксированный идентификатор означает, что сетка должна иметь идентификатор, например: "myGridId", а компонент столбца имеет идентификатор, например: "FirstColumn"
Вы уже сделали это здесь <Column field = "networkType" title = "Network Type" width = "250px" id = "networkTypeId" /> с id = ... просто поместите его внутрь {}, чтобы он был id = {networkTypeId} и сделайте это для всех компонентов Column
Выдает ошибку во время компиляции: Строка 200: 'networkTypeId' не определен no-undef
Он не сломается, но все равно идентификатор не назначен элементам управления
Не могли бы вы описать, для чего вы собираетесь использовать идентификатор? Вместо этого я рекомендую использовать ref. Id не типичен для работы с React DOM.
Нам нужно использовать этот идентификатор для наших сценариев автоматизации, чтобы по идентификатору мы могли идентифицировать элемент управления и выполнить необходимую операцию.
Любое предложение, пожалуйста?
id в React не является идентификатором HTML. Когда вы объявляете id в качестве опоры компонента в React, этот компонент не имеет идентификатора в его html, поэтому я думаю, вашей команде нужно найти какую-то другую стратегию для автоматизации.
Если вы используете lodash, вы также можете использовать встроенную функцию _.uniqueId(), чтобы избежать установки другого модуля.
Это не работает, потому что id нужно установить в элементе HTML, а не в каком-то настраиваемом компоненте. Вы можете проверить документы для получения дополнительной информации и списков поддерживаемых атрибутов html. Установка этого параметра на table должна дать вам желаемый результат. Например.:
<table id = "myTable">
<tr>
<td> data </td>
</tr>
</table>
В вашем случае вы можете изменить свою реализацию <Grid/> и заставить ее распространять переданный id на базовый корневой элемент html.
Понятно, но мне нужно получить фиксированные идентификаторы для наших элементов управления реакцией.