Is there a seamless way to combine custom and native props in a REACT TS component wrapper?
P粉186897465
P粉186897465 2024-03-30 17:01:40
0
1
375

I have several components that extend the native functionality of inputs, buttons, forms, etc., but I find it tedious to have to include every event handler and prop when the team needs it.

I tried simply making the component prop type extend the native prop type and then using object propagation to automatically apply all the native props. The next problem is that custom props are not supported and should not be applied to native elements.

To solve this problem, the only solution I found was to copy the name of each custom prop in the component parameters like this: {customProp1, customProp2, ...nativeProps}. However, this solution, while much better than having to add all native props, forces me to copy all the props and I lose the props. I like the prefix used to distinguish props from local variables.

Is there a clever way to filter out native props from custom props?

Example of what I want to achieve:

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

My current best solution involves copying each prop name and using the spread operator on the remaining props.

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

P粉186897465
P粉186897465

reply all(1)
P粉826283529

Have you tried using interface with extends?

import React from 'react';

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

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

export default Button;

Otherwise, you can nest native button props:

import React from "react";

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

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

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

export default App;
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!