React TypeScript向子组件传递props时报TS2322错误如何解决

• 你没有为子组件Child声明可接收的Props类型，React.FC未传入泛型参数时，默认仅支持内置的children属性，你从父组件传入的changeValue属性无法被TypeScript识别，因此抛出TS2322类型不匹配错误。
• 除此之外你的代码还存在两处可运行性问题：
  • 子组件内调用了props.data，但你既没有为该属性声明类型，父组件也没有传递该属性
  • textarea的onChange回调写法错误，你当前写的() => changeValue既没有从props中取出changeValue方法，也没有主动调用它，事件触发时不会执行任何逻辑，同时你定义的内部状态textValue也没有被使用。

第一步：修改Child.tsx，声明Props类型并修正逻辑 #

import * as React from 'react';
import { useState } from 'react';

// 声明子组件可接收的Props类型
interface ChildProps {
  changeValue: () => void;
  // 如果确实需要父组件传data就保留这行，不需要就删除
  data?: string;
}

// 给React.FC传入泛型参数，绑定Props类型
export const Child: React.FC<ChildProps> = (props) => {
  const [textValue, setTextValue] = useState(
    'let name; \n' + 'let age; \n' + 'name = 5;'
  );

  return (
    <div>
      <textarea
        id="details"
        name="details"
        {/* 如果用内部状态就用textValue，如果用父组件传的就用props.data */}
        value={textValue}
        {/* 修正回调写法，触发时执行props里的changeValue */}
        onChange={() => props.changeValue()}
      />
    </div>
  );
};

第二步：可选修改Parent.tsx #

如果子组件需要data属性，在父组件传递时补上即可：

import * as React from 'react';
import { Child } from '../components/Child';

const Parent: React.FC = () => {
    function changeValue() {
        console.log("hello");
    }
  return (
    <div>
        {/* 需要传data就加，不需要就保留原来的写法即可 */}
        <Child changeValue={changeValue} data="父组件传递的文本内容"/>
      </div>
  );
};
export default Parent;

内容的提问来源于stack exchange，提问作者lakshmiravali rimmalapudi