Existe-t-il un moyen transparent de combiner des accessoires personnalisés et natifs dans un wrapper de composant REACT TS ?

Question

J'ai plusieurs composants qui étendent les fonctionnalités natives des entrées, des boutons, des formulaires, etc., mais je trouve fastidieux de devoir inclure chaque gestionnaire d'événements et accessoires lorsque l'équipe en a besoin.

J'ai simplement essayé de faire en sorte que le type d'accessoire de composant étende le type d'accessoire natif, puis d'utiliser la propagation d'objet pour appliquer automatiquement tous les accessoires natifs. Le problème suivant est que les accessoires personnalisés ne sont pas pris en charge et ne doivent pas être appliqués aux éléments natifs.

Pour résoudre ce problème, la seule solution que j'ai trouvée a été de copier le nom de chaque accessoire personnalisé dans les paramètres du composant comme ceci : {customProp1, customProp2, ...nativeProps}. Cependant, cette solution, bien que bien meilleure que de devoir ajouter tous les accessoires natifs, m'oblige à copier tous les accessoires et je perds les accessoires. J'aime le préfixe utilisé pour distinguer les accessoires des variables locales.

Existe-t-il un moyen intelligent de filtrer les accessoires natifs des accessoires personnalisés ?

Exemple de ce que je souhaite réaliser :

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

Ma meilleure solution actuelle consiste à copier le nom de chaque accessoire et à utiliser l'opérateur de propagation sur les accessoires restants.

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

Avez-vous essayé d'utiliser interface 与 extends ensemble ?

import React from 'react';

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

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

export default Button;

Sinon, vous pouvez imbriquer des accessoires de boutons natifs :

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;