92

我想我只是无法解决这个问题，我可能已经尝试了六次并且总是求助于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”不可分配给目标属性。

4

11 回答 11

112

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

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

这将告诉打字稿编译器您要输入按钮道具以及“MyButtonProps”

于 2017-08-14T15:25:16.313 回答
56

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

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

export const Button: React.FC<ButtonProps &
  React.HTMLProps<HTMLButtonElement>> = ({
  ...props,
  children,
  icon
}) => (
  <StyledButton {...props}>
    {icon && <i className="material-icons">{icon}</i>}
    {children}
  </StyledButton>
);
于 2020-04-16T09:54:40.307 回答
53

我总是喜欢这样做：

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 */}
/>
于 2020-06-25T06:04:15.543 回答
4

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

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";

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

于 2021-03-26T03:44:42.030 回答
2

我为我解决了这个代码，你只需ButtonHTMLAttributes要从 react 导入就可以了

import { ButtonHTMLAttributes } from "react";

interface MyButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
    children: any;
}

export const MyButton = (props: ButtonI) => {
    const { children } = props;
 
    return <button {...props}>{children}</button>;
};
于 2020-12-07T03:25:04.613 回答
1

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

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>
  );
}
于 2021-11-13T15:45:10.470 回答
1

如果您使用来自 '@emotion/styled' 的样式化组件，则所有答案都不起作用。

我不得不深入一点。

import styled from "@emotion/styled";
import React, { ButtonHTMLAttributes } from 'react';

export type ButtonVariant = 'text' | 'filled' | 'outlined';

export const ButtonElement = styled.button`
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
`;

export interface ButtonProps {
  variant: ButtonVariant;
}
export const Button: React.FC<ButtonProps & React.DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>> = ({
  children,
  variant,
  ...props
}) => (
  <ButtonElement
    {...props}
  >
    {children}
  </ButtonElement>
);

这种样式允许您传递按钮具有的所有道具，而且更重要的是，将 {...props} 填充到 ButtonElement 允许您轻松地重用带有样式组件的 Button，以一种好的方式进行您想要的 css 更改

import { Button } from '@components/Button';

export const MySpecificButton = styled(Button)`
  color: white;
  background-color: green;
`;
于 2021-10-20T01:40:36.583 回答
0 
  private yourMethod(event: React.MouseEvent<HTMLButtonElement>): void {
  event.currentTarget.disabled = true;
  }  

 <Button
 onClick={(event) => this.yourMethod(event)}
 />
于 2020-07-06T09:04:56.850 回答
0

我今天遇到了同样的问题，这是我解决它的方法：

ReactButtonProps.ts

import {
  ButtonHTMLAttributes,
  DetailedHTMLProps,
} from 'react';

/**
 * React HTML "Button" element properties.
 * Meant to be a helper when using custom buttons that should inherit native "<button>" properties.
 *
 * @example type MyButtonProps = {
 *   transparent?: boolean;
 * } & ReactButtonProps;
 */
export type ReactButtonProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>;

Button-ish在组件中的用法：

import classnames from 'classnames';
import React, { ReactNode } from 'react';
import { ReactButtonProps } from '../../types/react/ReactButtonProps';

type Props = {
  children: ReactNode;
  className?: string;
  mode?: BtnMode;
  transparent?: boolean;
} & ReactButtonProps;


const BtnCTA: React.FunctionComponent<Props> = (props: Props): JSX.Element => {
  const { children, className, mode = 'primary' as BtnMode, transparent, ...rest } = props;
  
  // Custom stuff with props

  return (
    <button
      {...rest} // This forward all given props (e.g: onClick)
      className={classnames('btn-cta', className)}
    >
      {children}
    </button>
  );
};

export default BtnCTA;

用法：

<BtnCTA className={'test'} onClick={() => console.log('click')}>
  <FontAwesomeIcon icon="arrow-right" />
  {modChatbot?.homeButtonLabel}
</BtnCTA>

我现在可以使用onClick它，因为它是从 ReactButtonProps 扩展而来的，并且它通过...rest.

于 2020-10-08T12:12:41.843 回答
0

使用 Ref 和 Key 扩展 HTML 元素

TL;博士
如果您需要能够接受 `ref` 和 key，那么您的类型定义将需要使用这个长而丑陋的东西： 
import React, { DetailedHTMLProps, HTMLAttributes} from 'react';

DetailedHTMLProps<HTMLAttributes<HTMLButtonElement>, HTMLButtonElement>
类型定义
查看类型定义文件，这是类型。我不确定为什么它不短，似乎你总是两次传递相同的 HTMLElement ？ 
type DetailedHTMLProps<E extends HTMLAttributes<T>, T> = ClassAttributes<T> & E;
缩短的详细 HTMLProps

您可以创建自己的类型来缩短我们的情况（这似乎是常见情况）。

import React, { ClassAttributes, HTMLAttributes} from 'react';

type HTMLProps<T> = ClassAttributes<T> & HTMLAttributes<T>;

export interface ButtonProps extends HTMLProps<HTMLButtonElement> {
  variant: 'contained' | 'outlined';
}
示例组件
import React, {ClassAttributes, HTMLAttributes, ForwardedRef, forwardRef} from 'react';

type HTMLProps<T> = ClassAttributes<T> & HTMLAttributes<T>;

export interface ButtonProps extends HTMLProps<HTMLButtonElement> {
  variant: 'contained' | 'outlined';
}

export const Button: React.FC<ButtonProps> = forwardRef(
  (props : ButtonProps, ref: ForwardedRef<HTMLButtonElement>) => {

    return (
      <button key="key is accepted" ref={ref} {...props}>
        {props.children}
      </button>
    );
  },
);
于 2022-01-08T23:47:30.377 回答
-1

您可以这样做来扩展按钮属性

import { ButtonHTMLAttributes, ReactNode } from "react";

interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
    children: ReactNode;
}

const Button = ({ children, ...props }: Props): JSX.Element => {
    return <button {...props}>{children}</button>;
};
于 2021-03-07T15:44:36.827 回答