javascript - 用连字符命名反应组件道具

Question

我有一个组件按钮与下面的界面反应

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作为道具传递，但是如果我data-test在接口中定义为，我会从打字稿中得到错误

data-test?:string;

有人可以告诉我如何通过道具与名称中的连字符做出反应吗？

标签： javascriptreactjs

Answer 1

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

'data-test'?: string;

在解构时我将其别名为

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