javascript - 使用连字符命名 React 组件 props

Question

我有一个组件按钮与下面的界面发生 react

interface ButtonI extends React.HTMLAttributes<HTMLButtonElement> {
  background?: string;
  border?: string;
  children?: React.ReactElement;
  className?: string;
  color?: string;
  disabled?: boolean;
  onClick?: (evt: any) => void;
  size?: 'small' | 'medium' | 'large' ;
}

我想将 data-test 作为 prop 传递，但是如果我在接口(interface)中将 data-test 定义为

，我会从 typescript 中收到错误

data-test?:string;

有人可以告诉我如何通过名称中的连字符来传递 props 吗？

Answer 1

我找到了如下解决方案:
在界面中我使用了单引号

'data-test'?: string;

在解构时我将其别名为

const {
      background,
      border,
      children,
      className,
      color,
      disabled,
      onClick,
      size,
      'data-test':dataTest
    } = props;