将usestate作为打字稿中的道具

Question

说我有一个父母组件，有两个子组件：

const Parent = () => {
   const [myVar, setmyVar] = useState(false)
   return (
     <>
       <MyChildComponent1 myVar={myVar} setMyVar={setMyVar} > 
       <MyChildComponent2 myVar={myVar} >
     </>
   )
}

现在如何正确设置MyChildComponent2中的类型？

这就是我到目前为止提出的：

const MyChildComponent1 = (
  {myVar, setMyVar}: 
  {myVar: boolean, setMyVar: (value: boolean) => void}) = (...)

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

Answer 1

匹配从调用useState返回的函数的类型是：

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

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

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

因此，所提供的通用类型传递到SetStateAction<S>，该类型定义为：

type SetStateAction<S> = S | ((prevState: S) => S);

本质上，组件的接口将是以下内容：

interface IProps {
  myVar: boolean;
  setMyVar?: (value: boolean | (prevVar: boolean) => boolean) => void;
}

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

import { Dispatch, SetStateAction } from "react";
interface IProps {
  myVar: boolean;
  setMyVar?: Dispatch<SetStateAction<boolean>>;
}

参考：[1] https://github.com/definitelytyped/definitelytyped/blob/master/types/react/react/index.t.ts#l845

Answer 2

dispatch＆amp;SetStateAction类型

正如@retsam所述，您还可以从React导入并使用类型Dispatch和SetStateAction：

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>,
) => {...};

希望这会有所帮助。

Answer 3

添加到 @fiz的评论中，他的块代码对我有些不适：

import React, { Dispatch, SetStateAction } from 'react';
const MyChildComponent1 = (
  myVar: boolean,
  setMyVar: Dispatch<SetStateAction<<boolean>>
) => {...};

我必须设置setMyVar: Dispatch<SetStateAction<boolean>>(一个括号太多(

Answer 4

也可以使用接口和反应组件这样做。

maincomponent.tsx

MAIN中定义的USESTATE组件的值分配是在儿童组成部分。当触发此字段时，使用效率的代码将运行。

import React, { useEffect } from 'react';
import Login from './views/Login/index';
const App: React.FunctionComponent = () => {
    const [isAuthenticated, setAuthenticatedStatus] = React.useState(false);
    useEffect(() => {
        if (isAuthenticated)
            window.location.href = "<redirect url>";
    }, [isAuthenticated]);
    return (<Login setLoginStatus={setAuthenticatedStatus} />)
};
export default App;

childcomponent.tsx

import { Dispatch, SetStateAction, FunctionComponent } from 'react';
import authService from '../../apiServices/authService';
interface IProps {
   setLoginStatus: Dispatch<SetStateAction<boolean>>;
}
const Login: FunctionComponent<IProps> = (props: IProps) => {
   const login = async (username: string, password: string) => {
      const response = await authService.authenticateUser(username, password);
      if (response && response.statusCode == 200 && response.result.accessToken) {
         props.setLoginStatus(true);
      }
      else {
         // ...
      }
   };

   return (
      <>
         ...
      </>
   );
};
export default Login;

Answer 5

我发现其他答案有些混乱，所以这对我有用：

parent.ts中的Intantiate usestate((：

const [someState, setSomeState] = useState<stateType>(initialState)

将setSomestate((传递给child.ts：

<Child
    setSomeState={setSomeState}
/>

确保仅通过((

传递名称

在child.ts设置道具之类的道具：

import Dispatch from 'react'
interface Props {setSomeState: Dispatch<stateType>}

Answer 6

myChildComponent1.tsx
设置类型的道具：

从"反应"中导入

类型props = {
Myvar：布尔人；
setMyvar：react.dispatch＆lt; react.setStateAction <boolean> ＆gt;;
}
const mychildComponent =({{myvar，setMyvar}：props(=＆gt;{

...您的代码...

}

Answer 7

在另一个问题上扩展我的答案。获得useState返回类型的，可以将儿童组件类型类型声明为此ReturnType

的第一项和第二个项目

type UseStateHook = ReturnType<typeof useState<boolean>>
const MyChildComponent1 = (
    myVar: UseStateHook[0]
    setMyVar: UseStateHook[1]
) => {...};