Question

当我第一次开始在反应中适应打字稿时，我注意到我不能使用...props，因为打字稿会检查组件中传递的每个道具。很棒，但也很烦人，在这里我必须声明性地将本地道具（例如id，name等）传递为道具。


interface MyComponentProps {
  name: string,
  id: string,
  placeholder: string
}

const MyComponent = ({
  name,
  id,
  placeholder
}: MyComponentProps) => {
  return <input type="text" placeholder={placeholder} name={name} id={id}/>
}
export default function App() {
  return (
    <div className="App">
      <MyComponent placeholder="Name" name="something" id="myInput" />
    </div>
  );
}

Answer 1

您可以将其显式转换为HTMLAttributes

用HTMLAttributes声明一个类似于组件道具联合的接口

interface MyComponentProps = {}

const MyComponent: React.FC<MyComponentProps & HTMLAttributes>...

详细说明，您可以在这里找到： https://stackoverflow.com/a/40032869/4186110

Answer 2

您应该编辑界面，使其扩展HTML input元素的属性：

interface MyComponentProps extends InputHTMLAttributes< HTMLInputElement>)  {
  // add other custom props
}

const MyComponent: React.FC<MyComponentProps> = (props) => (...)

使用打字稿在反应中传播道具

2 个答案: