我正在嘗試創建 Header 組件，當我添加道具“testId”時，我得到以下型別。訊息 -->
輸入'{孩子：ReactNode; 測驗ID：字串| 不明確的; }' 不可分配給型別 'IntrinsicAttributes & ClassAttributes & HTMLAttributes'。型別“IntrinsicAttributes & ClassAttributes & HTMLAttributes”上不存在屬性“testId”
但是當我使用“id”而不是“testId”時，我沒有收到型別錯誤，這很奇怪。我想將“testId”用于 Heading 道具，但不確定我需要分配什么型別。我錯過了什么？ https://codesandbox.io/s/flamboyant-leftpad-l3bhj?file=/src/App.tsx
import "./styles.css";
import * as React from "react";
interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
children?: React.ReactNode;
testId?: string;
}
const Heading: React.FunctionComponent<HeadingProps> = ({
headingLevel: HeadingLevel = "h1",
children,
testId
}: HeadingProps) => {
return <HeadingLevel testId={testId}>{children}</HeadingLevel>;
};
const App: React.FC<{ headingText: string; description: string }> = () => (
<div>
<Heading headingLevel="h2" testId="test-heading">
Hello World!
</Heading>
</div>
);
export default App;
uj5u.com熱心網友回復：
問題出在以下行：
return <HeadingLevel testId={testId}>{children}</HeadingLevel>;
testId 不是有效的 HTML 屬性。您應該使用 testId 作為 Heading 道具，并使用 JSON 作為 HeadingLevel 組件中的自定義屬性。
import "./styles.css";
import * as React from "react";
interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
children?: React.ReactNode;
testId?: string;
}
const Heading: React.FunctionComponent<HeadingProps> = ({
headingLevel: HeadingLevel = "h1",
children,
testId
}: HeadingProps) => {
const attrs = {"testId": testId}
return <HeadingLevel {...attrs}>{children}</HeadingLevel>;
};
const App: React.FC<{ headingText: string; description: string }> = () => (
<div>
<Heading headingLevel="h2" testId="test-heading">
Hello World!
</Heading>
</div>
);
export default App;
uj5u.com熱心網友回復：
您的訪問中有錯字。您testId在介面中指定，但在您嘗試訪問的實作testingId中與您的介面簽名不匹配。此外，使用常規id有效，因為這是所有元素的有效屬性。這是更正后的代碼：
import "./styles.css";
import * as React from "react";
interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
headingLevel: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p";
children?: React.ReactNode;
testId?: string;
}
const Heading: React.FunctionComponent<HeadingProps> = ({
headingLevel: HeadingLevel = "h1",
children,
testId // typo was here
}: HeadingProps) => {
return <HeadingLevel>{children}</HeadingLevel>;
};
const App: React.FC<{ headingText: string; description: string }> = () => (
<div>
<Heading headingLevel="h2" testId="test-heading"> {/* typo was here */}
Hello World!
</Heading>
</div>
);
export default App;
TypeScript Playground 鏈接
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/419275.html
標籤：
上一篇：屬性'options'在'{question:number,label:string;型別中是可選的...etc}'但在型別'{question:an