是否有一種無縫方法可以在 REACT TS 組件包裝器中組合自訂和本機 props？

Question

我有幾個元件可以擴展輸入、按鈕、表格等元素的本機功能，但我發現必須在團隊需要時包含每個事件處理程序和道具是很乏味的。

我嘗試簡單地使元件道具類型擴展本機道具類型，然後使用物件傳播自動應用所有本機道具。下一個問題是不支援自訂道具，並且不應將其應用於原生元素。

為了解決這個問題，我找到的唯一解決方案是複製元件參數中每個自訂道具的名稱，如下所示：{customProp1，customProp2，...nativeProps}。然而，這個解決方案雖然比必須添加所有原生道具要好得多，但它迫使我複製所有道具，並且我失去了道具。我喜歡用來區分 props 和局部變數的前綴。

有沒有一個巧妙的方法可以從自訂道具中過濾掉原生道具？

我想要實現的目標的範例：

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

我目前的最佳解決方案包括複製每個道具名稱並對其餘道具使用擴展運算符。

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;