如何将使用 typescript 定义的 useState 钩子传递给另一个反应组件？

Question

我在使用 Typescript 将 useState 挂钩从一个组件传递到另一个组件时遇到了一些困难

这是一个非常简单的代码，只有两个文件来显示这个问题：

作为示例入口点的 App 组件

import { useState } from 'react';
import './App.css';
import Header from './Components/Header';

type personType = {
 name: String,
 language: String
}

const initialPerson ={
 name : 'james',
 language: 'english'
} 

function App() {
 const [ person, setPerson] = useState<personType>(initialPerson);

 return (
   <div className="App">
     <Header setPerson={setPerson} person={person}/>
   </div>
 );
}

export default App;

接收 useState 作为 props 的 Header 组件

import { personType } from "../../App"

const Header = ({person, setPerson}:{person: personType, setPerson:any}) => {

  const handleTranslate = () => {
    setPerson({name:'john', language:'french'})
  }
  return(
    <div>
      <h1>TYPESCRIPT TEST</h1>
      <button onClick={handleTranslate}>clickMe</button>
      {person.name}
      {person.language}
    </div>
  )
}

export default Header

现在我在重新定义 useState 函数“setPerson”时遇到了麻烦，我暂时将其留给 :any，因为我似乎无法在其中找到函数参数的正确语法。

我试过了：

 setPerson:(personType)=> personType

返回类型很好，这是我找不到语法的参数...

Answer 1

首先导出您的类型personType，以便可以在其他组件中访问它。要么从同一个组件中导出它，要么从另一个打字稿文件中导出它，如下所示。

export type personType = {
  name: String;
  language: String;
}; 

那你要在Header组件中导入这个类型

import React, {  useState, FC } from "react";
import { personType } from "../App";
type IHeaderProps = {
  person: personType;
  setPerson: (person: personType) => void;
};
const Header: FC<IHeaderProps> = ({ person, setPerson }) => {
  const handleTranslate = () => {
    setPerson({ name: "john", language: "french" });
  };
  return (
    <div>
      <h1>TYPESCRIPT TEST</h1>
      <button onClick={handleTranslate}>clickMe</button>
      {person.name}
      {person.language}
    </div>
  );
};

您只需定义 Header 组件将接收的道具类型。在我们的例子中，第一个是 personType 类型的 person，第二个是 function 我只是对其进行测试，它运行良好。我希望这能回答你的问题。如果是，请检查图标以将其标记为已接受的答案。

谢谢！