MaterialUI React 组件上 data-* 属性的打字稿错误

Question

我试图将data-testid属性传递给 Material-UISelect组件，但收到以下 Typescript 错误：

输入 '{ "data-testid": string; }' 不可分配给类型“HTMLAttributes”。对象文字只能指定已知属性，并且“HTMLAttributes”类型中不存在“data-testid”。

Select.d.ts(111, 3)：预期类型来自属性“SelectDisplayProps”，该属性在类型“IntrinsicAttributes & SelectProps”上声明

这是由以下代码引起的：

import React from "react";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

export default function MyComponent() {
    return (
        <Select SelectDisplayProps={{ "data-testid": "my-component" }}>
            <MenuItem value="1">One</MenuItem>
            <MenuItem value="2">Two</MenuItem>
            <MenuItem value="3">Three</MenuItem>
        </Select>
    );
}

当 data-* 属性直接传递给组件（例如 ）时，这似乎不是问题<Select data-testid="my-component" />，因此问题在于将其传递给SelectDisplayProps.

所有SelectDisplayProps要做的就是将 props 传递给内部的子元素<Select>（文档）。

我该如何修复这个错误？

Answer 1

您可以在这里找到类型SelectDisplayProps：https://github.com/mui-org/material-ui/blob/v4.9.12/packages/material-ui/src/Select/Select.d.ts#L115

SelectDisplayProps?: React.HTMLAttributes<HTMLDivElement>;

您可以根据需要扩展它（MySelectDisplayProps在下面的示例中）：

import * as React from "react";
import "./styles.css";
import Select from "@material-ui/core/Select";
import MenuItem from "@material-ui/core/MenuItem";

interface MySelectDisplayProps extends React.HTMLAttributes<HTMLDivElement> {
  "data-testid"?: string;
}

function MyComponent() {
  const [value, setValue] = React.useState("1");
  return (
    <Select
      value={value}
      onChange={event => setValue(event.target.value as string)}
      SelectDisplayProps={
        { "data-testid": "my-component" } as MySelectDisplayProps
      }
    >
      <MenuItem value="1">One</MenuItem>
      <MenuItem value="2">Two</MenuItem>
      <MenuItem value="3">Three</MenuItem>
    </Select>
  );
}
export default function App() {
  return (
    <div className="App">
      <MyComponent />
    </div>
  );
}