Adakah terdapat cara yang lancar untuk menggabungkan prop tersuai dan asli dalam pembalut komponen REACT TS?

Question

Saya mempunyai beberapa komponen yang memanjangkan kefungsian asli input, butang, borang, dsb., tetapi saya merasa bosan untuk memasukkan setiap pengendali acara dan prop apabila pasukan memerlukannya.

Saya cuba hanya membuat jenis prop komponen memanjangkan jenis prop asli dan kemudian menggunakan perambatan objek untuk menggunakan semua prop asli secara automatik. Masalah seterusnya ialah prop tersuai tidak disokong dan tidak boleh digunakan pada elemen asli.

Untuk menyelesaikan masalah ini, satu-satunya penyelesaian yang saya temui ialah menyalin nama setiap prop tersuai dalam parameter komponen seperti ini: {customProp1, customProp2, ...nativeProps}. Walau bagaimanapun, penyelesaian ini, walaupun jauh lebih baik daripada perlu menambah semua prop asli, memaksa saya untuk menyalin semua prop dan saya kehilangan prop. Saya suka awalan yang digunakan untuk membezakan prop daripada pembolehubah tempatan.

Adakah terdapat cara bijak untuk menapis prop asli daripada prop tersuai?

Contoh apa yang saya ingin capai:

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

Penyelesaian terbaik semasa saya melibatkan menyalin setiap nama prop dan menggunakan operator hamparan pada prop yang tinggal.

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

Sudahkah anda mencuba menggunakan interface 与 extends bersama?

import React from 'react';

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

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

export default Button;

Jika tidak, anda boleh memasang prop butang asli:

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;