React，使用 TypeScript 将状态设置器（useState）传递给子组件答案

【问题标题】：React, passing state setter (useState) to child component with TypeScriptReact，使用 TypeScript 将状态设置器（useState）传递给子组件
【发布时间】：2022-08-21 18:07:51
【问题描述】：

将 useState setter 函数传递给子组件时，我很难弄清楚类型。

我试图简化为下面的基本代码：

父母

function Parent() {    
  const [name, setName] = useState(\"Structured\")
  ..
  return (
    <>
      <Child setName={setName}/>
    </>

孩子

import { Dispatch, SetStateAction } from \"react\";

function Child(setName: Dispatch<SetStateAction<string>>){
  return (
    <>
      <Input onChange={
        (value)=>{
          setName(value: SetStateAction<string>)
          console.log(value)
        }
      </Input>
    </>

在父母身上，我收到以下错误：

类型 \"{ setName: Dispatch<SetStateAction>; }\' 不是可分配给类型 \' IntrinsicAttributes & 调度<SetStateAction\' 类型 \'IntrinsicAttributes & Dispatch<SetStateAction>\' 上不存在属性 \'setName\'。

关于我得到的孩子：

类型参数 \"string | string[]\' 不可分配给类型参数 \'SetStateAction\' 类型 \“细绳[]\' 不可分配给类型 \"SetStateAction\'

Child(setName: Dispatch<SetStateAction<string>>) 应该是 Child({setName: Dispatch<SetStateAction<string>>})

标签： javascript reactjs typescript

【解决方案1】：

应该

function Child({ setName } : { setName: Dispatch<SetStateAction<string>>}){

Child 组件接受 props，它是一个对象，而不仅仅是 setName 值

【讨论】：

【解决方案2】：

如果你想要一个完整的 React 组件，你可以在 React 的 FC 的帮助下输入你的 React 功能组件。如果不是，例如，您无法从 props 访问 children，因为它不被称为 React 组件。

import { Dispatch, SetStateAction, FC} from "react";

interface ChildPropsType {
  setName: Dispatch<SetStateAction<string>>
}
/* 
   I'm using an interface for convenience, you can 
   replace it with { setName: Dispatch<SetStateAction<string>> }
*/
const Child : FC<ChildPropsType> = ({setName}) => {
  return (
    <>
      <Input onChange={
        (value as string)=>{
          setName(value);
        }
      </Input>
    </>
  )
}
export default Child;

对于onChange 部分，我正在做类型转换，因为我不知道Input 的样子。

【讨论】：