Reactjs 在typescript中将useState作为道具传递

假设我有一个父组件和两个子组件：

const Parent = () => {
   const [myVar, setmyVar] = useState(false)

   return (
     <>
       <MyChildComponent1 myVar={myVar} setMyVar={setMyVar} \> 
       <MyChildComponent2 myVar={myVar} \>
     </>
   )
}

---

setMyvar

的类型正确吗？还是应该是其他类型？

与调用

useState

返回的函数相匹配的类型是：

setMyVar: (value: boolean | ((prevVar: boolean) => boolean)) => void;

如果我们查看

DefinitelyTyped

[1]中的类型定义文件，我们可以看到返回类型中的第二种类型是分派：

function useState<S>(initialState: S | (() => S)): [S, Dispatch<SetStateAction<S>>];

正如@Retsam所说，最好使用React的导出类型：

import { Dispatch, SetStateAction } from "react";

interface IProps {
  myVar: boolean;
  setMyVar?: Dispatch<SetStateAction<boolean>>;
}

从“react”导入{Dispatch，SetStateAction}；
接口IProps{
myVar：布尔型；
setMyVar？：调度；
}

参考资料： [1]

调度和设置状态操作类型 如@Retsam所述，您还可以从React导入和使用类型

Dispatch

和

SetStateAction

：

import React, { Dispatch, SetStateAction } from 'react';

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<boolean>>
) => {...};

import React，{Dispatch，SetStateAction}来自“React”；
常量MyChildComponent1=(
myVar:boolean，
setMyVar：调度
) => {...};

---

奖金 当我发现自己经常使用它时，我会创建一个类型别名来帮助提高可读性

import React, { Dispatch, SetStateAction } from 'react';

type Dispatcher<S> = Dispatch<SetStateAction<S>>;

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatcher<boolean>,
) => {...};

import React，{Dispatch，SetStateAction}来自“React”；
类型Dispatcher=调度；
常量MyChildComponent1=(
myVar:boolean，
setMyVar:Dispatcher，
) => {...};

---

希望这能有所帮助。

再加上@fiz的评论，他的代码块对我有点不起作用：

import React, { Dispatch, SetStateAction } from 'react';

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<<boolean>>
) => {...};

import React，{Dispatch，SetStateAction}来自“React”；
常量MyChildComponent1=(
myVar:boolean，
setMyVar:Dispatch{…}；

---

我必须设置

setMyVar:Dispatch

（括号太多）

他们可以从React导入

Dispatch

和

SetStateAction

类型，因此它们的类型可以是

{myVar:boolean，setMyVar？:Dispatch}

@Retsam，consord将此作为回答而不是评论。我不熟悉打字脚本、反应和挂钩——同时有太多的活动部件。这种方法有什么缺点吗？是的，谢谢@Retsam…TS停止对我尖叫并删除了10条警告这是金子！谢谢你，把它缩短一点怎么样？

{myVar:boolean，setMyVar？：Dispatch}

感谢您纠正了语法错误。顺便说一句，您可以在下次编辑答案，以防出现类似这样的小错误或其他细微的改进，而不是创建整个其他帖子。欢迎来到社区！更清晰的答案

import React, { Dispatch, SetStateAction } from 'react';

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<boolean>>
) => {...};

import React, { Dispatch, SetStateAction } from 'react';

type Dispatcher<S> = Dispatch<SetStateAction<S>>;

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatcher<boolean>,
) => {...};

import React, { Dispatch, SetStateAction } from 'react';

const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<<boolean>>
) => {...};