我如何将用打字稿定义的 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

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

Answer 1

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

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

然后你必须在HeaderComponent

中导入这个类型

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 组件将接收的道具类型。在我们的例子中，第一个是 person 类型 personType，第二个是 function 我只是测试它，它工作完美。我希望这会回答你的问题。如果是，请检查图标以将其标记为已接受的答案。

谢谢！

我如何将用打字稿定义的 useState 挂钩传递给另一个反应组件？

how can i pass a useState hook defined with typescript down to another react component?

typescript

reactjs

use-state

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