如何为反应组件提供 Id 或 Attribute

Posted 2023-03-05

【中文标题】如何为反应组件提供 Id 或 Attribute

【英文标题】：How to provide Id or Attribute to the react components

【发布时间】：2019-02-28 06:17:34

【问题描述】：

我们需要为我们的 react 组件提供一些标识符，以便我们可以在这些控件上编写自动化测试用例。

import React from 'react';
import ReactDOM from 'react-dom';
import  Grid, GridColumn as Column  from '@progress/kendo-react-grid';

import products from './products.json';

class App extends React.Component 
    state = 
        gridData: products
    

    render() 
        return (
            <div>
                <Grid
                    data-grid="myGrid"
                    style= height: '400px' 
                    data=this.state.gridData
                >
                    <Column field="ProductID" title="ID"  />
                    <Column field="ProductName" title="Name"  />
                    <Column field="Category.CategoryName" title="CategoryName" />
                    <Column field="UnitPrice" title="Price"  />
                    <Column field="UnitsInStock" title="In stock"  />
                    <Column field="Discontinued" 
                        cell=(props) => (
                            <td>
                                <input disabled type="checkbox" checked=props.dataItem[props.field] />
                            </td>
                        ) />
                </Grid>
            </div>
        );
    


ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

我们尝试为网格提供 data-grid="myGrid" 属性，但这似乎不起作用。您能否提出这里的错误或解决方案。

【问题讨论】：

有什么建议吗？

【参考方案1】：

您应该使用camelCase 传递道具，所以它应该是这样的：

<Grid dataGrid="myGrid" />

在Grid 中，您可以这样指定：

const Grid = (dataGrid) => (
   <div data-grid=dataGrid />
)

或者您可以将id 设置为组件<Grid id="myGrid" />

【讨论】：

好的，我已经尝试了提供的选项，但似乎它不起作用.. 在检查组件时，我看不到提供的 ID/属性