我首先嘗試將 isToggle 和 onToggle 設定為布爾型別，但它仍然會警告您在下面看到的更改后的型別。
這是檢查錯誤：型別“屬性”不可分配給型別“布爾|” 不明確的'。
這是 onChange 的錯誤：型別“屬性”不可分配給型別“ChangeEventHandler”。型別“屬性”不匹配簽名“（事件：ChangeEvent）：無效”。
import React, {ChangeEventHandler} from "react";
import classNames from "classnames";
import './SwitchToggle.css';
interface Atrribute{
rounded:boolean;
isToggled:boolean|undefined;
onToggle:ChangeEventHandler<HTMLInputElement>;
}
const SwitchToggle =(rounded:Atrribute ,isToggled:Atrribute,onToggle:Atrribute)=>{
const sliderCX = classNames("slider",{
"rounded":rounded
})
return(
<label className={"switch"}>
<input type={"checkbox"} checked={isToggled} onChange={onToggle}/>
<span className={sliderCX}/>
</label>
)
}
export default SwitchToggle;
我也在 main 中使用了這段代碼，它的作業正常
const [isToggled,setTisToggled] = useState(false);
<SwitchToggle isToggled{...SwitchToggle.prototype.isToggled} onToggle={()=>setTisToggled(!SwitchToggle.prototype.isToggle)}/>
uj5u.com熱心網友回復：
這不是您解構函式引數的方式：
const SwitchToggle = (rounded:Atrribute ,isToggled:Atrribute,onToggle:Atrribute) => {...}
你在這里告訴 TypeScript 是這個函式將接收三個引數，每個引數都是 type Atrribute。但相反，此函式將接收一個型別為的引數，Atrribute您希望從中解構三個屬性。
要解構物件，請使用{}解構語法：
const SwitchToggle = ({ rounded, isToggled, onToggle } : Atrribute) => {...}
uj5u.com熱心網友回復：
我覺得你應該這樣寫...
const SwitchToggle =({ rounded, isToggled ,onToggle }:Atrribute)=>{
uj5u.com熱心網友回復：
你的道具宣告是錯誤的。你不能這樣寫你的道具：
const SwitchToggle =(rounded:Atrribute ,isToggled:Atrribute,onToggle:Atrribute) => {...}
Atrribute是整個props物件的型別，所以你應該這樣寫：
const SwitchToggle =(props:Atrribute) => {...}
或者，如果你想解構你的物件，那么它將是這樣的：
const SwitchToggle =({rounded, isToggled, onToggle}:Atrribute) => {...}
PS：你寫錯了Atrribute。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/444515.html
標籤：javascript 反应 打字稿 反应钩子