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

Question

将 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 & Dispatch<SetStateAction”属性“setName”在类型“IntrinsicAttributes & Dispatch<SetStateAction>”上不存在。

关于我得到的孩子：

“string | string[]”类型的参数不可分配给“SetStateAction”类型的参数 类型“string[]”不可分配给“SetStateAction”类型

Answer 1

应该

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

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

Answer 2

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

对于onChange部分，我现在正在做演员，因为我不知道这个Input的样子。 你能展示一下吗？

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;