reactjs 有没有一种优雅的方式可以混合REACT TS组件 Package 器的自定义属性和本地属性？

hgqdbh6s 于 2023-03-17 发布在 React

关注(0)|答案(1)|浏览(82)

我有几个组件扩展了输入、按钮、表格等元素的原生功能，发现必须包含团队所需的每个事件处理程序和 prop 是很乏味的。
我试过简单地让组件属性类型扩展原生属性类型，然后使用对象扩展来自动应用所有原生属性。下一个问题是自定义属性不受支持，不应该应用于原生元素。
要解决这个问题，我找到的唯一解决方案是复制组件参数中每个自定义 prop 的名称，如下所示：{customProp 1，customProp 2，... nativeProps}。然而，这个解决方案虽然比添加所有原生属性要好得多，但它迫使我复制所有属性，并且我失去了props.前缀，我喜欢使用该前缀来区分属性和局部变量。
有没有一种简洁的方法可以从自定义 prop 中过滤掉原生 prop ？
我正在努力实现的目标示例：

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

我目前最好的解决方案，其中包括复制每个 prop 名称和使用传播算子对其余的。

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

reactjs

来源：https://stackoverflow.com/questions/75753799/is-there-an-elegant-way-to-mix-custom-props-and-native-props-for-a-react-ts-comp

1条答案

按热度按时间

qxsslcnc1#

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

import React from 'react';

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

const Button = ({ color, ...props }: IButtonProps) => {
  return <button {...props} style={{ backgroundColor: color }} />;
};

export default Button;

否则，可以嵌套原生按钮 prop ：

import React from "react";

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

const Button = ({ buttonProps, ...props }: IButtonProps) => {
  return <button {...buttonProps} style={{ backgroundColor: props.color }} />;
};

const App = () => {
  return <Button color='red' buttonProps={{ disabled: true }} />;
};

export default App;

赞(0）回复(0）举报 2023-03-17

我来回答

reactjs 有没有一种优雅的方式可以混合REACT TS组件 Package 器的自定义属性和本地属性？

1条答案

相关问题

热门标签

最新问答