如何防止将类名和样式道具传递给 React 中的组件答案

【问题标题】：How to prevent passing className and style props to component in React如何防止将类名和样式道具传递给 React 中的组件
【发布时间】：2021-10-28 15:43:42
【问题描述】：

您好，我有一个自定义按钮组件。此按钮组件应接受除 className 和 style 之外的所有 ButtonHTMLAttributes，以防止开发人员添加自己的样式。我正在使用带有 React 的 TypeScript。我怎样才能做到这一点？我尝试使用 Omit 但它不起作用。

【问题讨论】：

标签： html css reactjs typescript

【解决方案1】：

我认为您可以做的是覆盖样式和 classNames 属性，例如：

function CustomButton = (props> => {
   return (
      <button {...props} className={""} style={{}}/>
   ) 
}

【讨论】：

【解决方案2】：

我不知道你是如何注释类型的。但是你可以试试rest parameter 的概念。

function Button({className, style, ...restProps}) {
    // Use the restProps object
}

【讨论】：