react-ts组件如何使用自定义属性

在 React 中使用自定义属性的方法与普通的 HTML 元素类似。可以使用 `props` 对象来传递自定义属性，然后在组件内部使用它们。在 TypeScript 中，需要先定义组件的属性类型。

以下是一个示例：

import React from 'react';

interface Props {
  customProp: string;
}

const MyComponent: React.FC<Props> = ({ customProp, children }) => {
  return (
    <div data-custom-attribute={customProp}>
      {children}
    </div>
  );
};

export default MyComponent;

在上面的代码中，我们定义了一个名为 `customProp` 的自定义属性，并将其类型定义为 `string`。在组件内部，我们使用 `data-custom-attribute` 属性来设置自定义属性，并将属性值设置为 `customProp`。

在使用该组件时，可以将自定义属性作为 `props` 对象的一个属性传递给组件，如下所示：

import React from 'react';
import MyComponent from './MyComponent';

const App = () => {
  return (
    <MyComponent customProp="some value">
      Hello, World!
    </MyComponent>
  );
};

export default App;

在上述示例中，我们将自定义属性 `customProp` 的值设置为 `"some value"`，并将其作为 `props` 对象的一个属性传递给 `MyComponent` 组件。组件内部将使用该值设置 `data-custom-attribute` 属性。