在保留道具的同时扩展React和TypeScript中的HTML元素

Question

我只是无法绕过这个我想,我已经尝试了大概六次并总是求助于any...是否有合法的方式从HTML元素开始,将其包装在组件中,并将其包装在另一个组件中,HTML道具通过一切？基本上自定义HTML元素？例如,类似于:

interface MyButtonProps extends React.HTMLProps<HTMLButtonElement> {}
class MyButton extends React.Component<MyButtonProps, {}> {
    render() {
        return <button/>;
    }
} 

interface MyAwesomeButtonProps extends MyButtonProps {}
class MyAwesomeButton extends React.Component<MyAwesomeButtonProps, {}> {
    render() {
        return <MyButton/>;
    }
}

用法:

<MyAwesomeButton onClick={...}/>

每当我尝试这种组合时,我都会收到类似于的错误:

foo的属性'ref'不能分配给目标属性.

Answer 1

似乎上面的答案已经过时了。

在我的例子中，我用一个功能组件包装了一个样式组件，但仍然想公开常规的 HTML 按钮属性。

export const Button: React.FC<ButtonProps &
  React.HTMLProps<HTMLButtonElement>> = ({
  children,
  icon,
  ...props
}) => (
  <StyledButton {...props}>
    {icon && <i className="material-icons">{icon}</i>}
    {children}
  </StyledButton>
);

Answer 2

您可以更改组件的定义以允许反应html按钮道具

class MyButton extends React.Component<MyButtonProps & React.HTMLProps<HTMLButtonElement>, {}> {
    render() {
        return <button {...this.props}/>;
    }
}

这将告诉typescript编译器你想要输入按钮道具以及'MyButtonProps'

Answer 3

我总是喜欢这样做：

import React from 'react';

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  title: string;
  showIcon: boolean;
}

const Button: React.FC<ButtonProps> = ({ title, showIcon, ...props }) => {
  return (
    <button {...props}>
      {title}
      {showIcon && <Icon/>}
    </button>
  );
};

然后你可以这样做：

<Button
  title="Click me"
  onClick={() => {}} {/* You have access to the <button/> props */}
/>

Answer 4

这通过使用类型（而不是接口）对我有用：

type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
  children: React.ReactNode;
  icon?: React.ReactNode;
};

function Button({ children, icon, ...props }: ButtonProps) {
  return (
    <button {...props}>
      {icon && <i className="icon">{icon}</i>}
      {children}
    </button>
  );
}

Answer 5

这就是我在扩展原生元素时所做的：

import React, { ButtonHTMLAttributes, forwardRef } from "react";

export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    myExtraProp1: string;
    myExtraProp2: string;
}

export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({ myExtraProp1, myExtraProp2, ...props }, ref) => (
        <button
            {...props}
            ref={ref}
            // Do something with the extra props
        />
    ),
);

Button.displayName = "Button";

forwardRefref确保您在使用组件时可以获得对底层 HTML 元素的引用。

Answer 6

最简洁的方法

这是我每次想要扩展 HTML 元素时使用的方法。

import { JSX } from 'react';

type ButtonProps = JSX.IntrinsicElements['button']
type DivProps = JSX.IntrinsicElements['div']

Answer 7

import * as React from "react";

interface Props extends React.HTMLProps<HTMLInputElement> {
  label?: string;
}

export default function FormFileComponent({ label, ...props }: Props) {
  return (
    <div>
      <label htmlFor={props?.id}></label>
      <input type="file" {...props} />
    </div>
  );
}