在 React (TS) 中的组件 props 中扩展 HTML 元素

Extend an HTML Element in a Component’s props in React (TS)

要在 React 中扩展组件 props 中的 HTML 元素，请在组件的 props 接口中扩展特定元素类型。

应用程序.tsx

复制了！
import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  text: string;
  children?: React.ReactNode;
  // ... your custom props here
}

const Button: React.FunctionComponent<ButtonProps> = ({text, ...rest}) => {
  return <button {...rest}>{text}</button>;
};

const App = () => {
  return (
    <div>
      <Button onClick={() => console.log('button clicked')} text="Click" />
    </div>
  );
};

export default App;

我们使用该React.ButtonHTMLAttributes类型来扩展组件属性中的按钮元素。

您可以在界面中添加自定义道具，并且您的组件可以传递任何特定于元素的道具。

该Button组件可以传递示例中任何特定于按钮的道具。

如果您需要更广泛的类型，则可以使用该HTMLAttributes类型。

其他常用的扩展类型有InputHTMLAttributes,
TextareaHTMLAttributes, LabelHTMLAttributes, SelectHTMLAttributes,
AnchorHTMLAttributes, ,
, 等CanvasHTMLAttributes。FormHTMLAttributesImgHTMLAttributes

请注意，我们
在示例中将HTMLButtonElement类型传递给了泛型。ButtonHTMLAttributes

您可能正在扩展不同类型的元素。

这些类型的名称一致HTML***Element。一旦您开始输入HTML..，您的 IDE 应该能够帮助您自动完成。

一些常用的类型有：HTMLInputElement、HTMLButtonElement、
HTMLAnchorElement、HTMLImageElement、HTMLTextAreaElement、
HTMLSelectElement等。

将 children prop 传递给组件

如果您需要将 Children 属性传递给扩展 HTML 元素的组件，请确保将该children属性键入为React.ReactNode。

应用程序.tsx

复制了！
import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  children?: React.ReactNode;
  // ... your custom props here
}

const Button: React.FunctionComponent<ButtonProps> = ({children, ...rest}) => {
  return <button {...rest}>{children}</button>;
};

const App = () => {
  return (
    <div>
      <Button onClick={() => console.log('button clicked')}>
        <p>Click</p>
        <p>Me</p>
      </Button>
    </div>
  );
};

export default App;

我们将组件children的 prop输入Button为React.ReactNode，因此可以向组件传递任何特定于按钮的 prop 和 a childrenprop。

ButtonProps
您可以在界面中定义所有自定义道具。

我还编写了有关如何将 create-react-app 与 TypeScript 结合使用的详细指南
。