Gibt es eine nahtlose Möglichkeit, benutzerdefinierte und native Requisiten in einem REACT TS-Komponenten-Wrapper zu kombinieren?

Question

Ich habe mehrere Komponenten, die die native Funktionalität von Eingaben, Schaltflächen, Formularen usw. erweitern, aber ich finde es mühsam, jeden Event-Handler und jede Requisite einbinden zu müssen, wenn das Team sie braucht.

Ich habe versucht, den Komponenten-Requisitentyp einfach so zu gestalten, dass er den nativen Requisitentyp erweitert, und dann die Objektweitergabe zu verwenden, um automatisch alle nativen Requisiten anzuwenden. Das nächste Problem besteht darin, dass benutzerdefinierte Requisiten nicht unterstützt werden und nicht auf native Elemente angewendet werden sollten.

Um dieses Problem zu lösen, bestand die einzige Lösung, die ich gefunden habe, darin, den Namen jeder benutzerdefinierten Requisite wie folgt in die Komponentenparameter zu kopieren: {customProp1, customProp2, ...nativeProps}. Diese Lösung ist zwar viel besser, als alle nativen Requisiten hinzufügen zu müssen, zwingt mich jedoch dazu, alle Requisiten zu kopieren, und ich verliere die Requisiten. Mir gefällt das Präfix, mit dem Requisiten von lokalen Variablen unterschieden werden.

Gibt es eine clevere Möglichkeit, native Requisiten aus benutzerdefinierten Requisiten herauszufiltern?

Beispiel dafür, was ich erreichen möchte:

import React from 'react'

type Props = {
    color: string,
}

const Button = ({...props}: Props, {...nativeProps} : React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>) => {
  return (
    <button {...nativeProps} style={{backgroundColor: props.color}}  />
  )
}

export default Button

Meine derzeit beste Lösung besteht darin, jeden Requisitennamen zu kopieren und den Spread-Operator für die verbleibenden Requisiten zu verwenden.

import React from 'react'

type CustomProps = {
    color: string,
    label: React.ReactNode,
    name: string,
}

type Props = CustomProps & Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, keyof CustomProps>;

const Button = ({color, label, ...props}: Props) => {

  return (
    <>
        {label}
        <button {...props} style={{backgroundColor: color}} />
    </>
  )
}

export default Button

Answer 1

您是否尝试过将 interface 与 extends 一起使用？

import React from 'react';

interface IButtonProps
  extends React.DetailedHTMLProps<
    React.ButtonHTMLAttributes,
    HTMLButtonElement
  > {
  color: string;
}

const Button = ({ color, ...props }: IButtonProps) => {
  return ;
};

export default Button;

否则，您可以嵌套本机按钮道具：

import React from "react";

interface IButtonProps {
  color: string;
  buttonProps?: React.DetailedHTMLProps<
    React.ButtonHTMLAttributes,
    HTMLButtonElement
  >;
}

const Button = ({ buttonProps, ...props }: IButtonProps) => {
  return ;
};

const App = () => {
  return ;
};

export default App;