react抛出错误中道具的typescript扩展运算符
react抛出错误中道具的typescript扩展运算符
提问于 2020-05-07 15:03:21
当我在react中使用typescript时，我想跳过每个单独的道具，特别是HTML的本机道具，比如id，name，placeholder等，但我在{...props}上遇到了错误
我已经用InputHTMLAttributes扩展了我的接口，所以typescript不会检查我的道具，但它仍然有未解决的错误
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>
);
}回答 1
Stack Overflow用户
回答已采纳
发布于 2020-05-07 15:12:07
首先，您需要使用rest扩展语法来获得道具，而不是像对象那样进行解构
其次，接口不需要将道具定义为对象
最后，您使用{..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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61651733
复制相关文章
相似问题
腾讯云开发者
