用于反应抛出错误中的道具的打字稿传播运算符

Question

当使用带有 react 的 typescript 时，我想跳过每个道具，尤其是 HTML 的原生道具，例如 id、名称、占位符等，但我的 {...props} 出现错误

我已经用InputHTMLAttributes 扩展了我的界面，所以打字稿没有检查我的道具，但它仍然得到未解决的错误

import React, { InputHTMLAttributes } from "react";
import "./styles.css";

interface MyComponentProps extends InputHTMLAttributes<HTMLInputElement> {
  nonNativeProp: string;
  props: object
}

const MyComponent: React.FC<MyComponentProps> = ({
  nonNativeProp,
  props
}) => {
  return <input type="text" {..props} />;
};

export default function App() {
  return (
    <div className="App">
      <MyComponent
        nonNativeProp="abc"
        placeholder="Name"
        name="something"
        id="myInput"
        data-custom="custom-attr"
      />
    </div>
  );
}

https://codesandbox.io/s/elegant-forest-42t4b?file=/App.tsx

Answer 1

首先，你需要使用rest spread语法来获取props，而不是像对象那样解构

其次，界面不需要将 props 定义为对象

最后你有{..props} 而不是{...props}。注意 props 前的 3 个点

interface MyComponentProps extends InputHTMLAttributes<HTMLInputElement> {
  nonNativeProp: string;
}

const MyComponent: React.FC<MyComponentProps> = ({
  nonNativeProp,
  ...props
}) => {
  return <input type="text" {...props} />;
};

export default function App() {
  return (
    <div className="App">
      <MyComponent
        nonNativeProp="abc"
        placeholder="Name"
        name="something"
        id="myInput"
        data-custom="custom-attr"
      />
    </div>
  );
}

Working demo