Typescript/React中如何调用Props接口内定义的函数

你的实现思路是完全正确的，这是React中「状态提升」的标准实现方式，非常适合多步注册流程需要共享父级状态的场景。你现在遇到的无法调用的问题是两个小疏漏导致的：

• 事件类型不匹配：父组件updateName定义的第一个参数是React.MouseEvent，但子组件的handleClick接收的事件类型是React.FormEvent<HTMLButtonElement>，类型不一致会触发TS报错，无法正常调用。
• 调用方式错误：NameProps是TypeScript接口定义，不是实际的props对象，你需要从子组件的入参中拿到实际传递的updateName函数实例再调用。

最小改动修正方案 #

只需调整子组件的调用逻辑即可：

// ChildComponent.tsx 完整示例
interface NameProps {
    firstName: string;
    lastName: string;
    // 统一事件类型和父组件保持一致
    updateName: (e: React.MouseEvent<HTMLButtonElement>, first: string, last: string) => void;
}

// 组件接收props参数
export default function FullName(props: NameProps) {
  // 可以提前把需要的属性解构出来，更方便调用
  const { updateName } = props;
  // 子组件自己维护的姓名输入状态
  const [first, setFirst] = useState('');
  const [last, setLast] = useState('');

  function handleClick(e: React.MouseEvent<HTMLButtonElement>) {
    console.log(first, last);
    // 直接调用props里拿到的updateName函数即可
    updateName(e, first, last);
  }

  return <button onClick={handleClick}>提交姓名</button>
}

可选优化方案 #

如果你不需要用到事件对象，可以直接把事件参数删掉，代码会更简洁：

1. 父组件调整updateName定义，传递时不需要额外包一层箭头函数：

// App.tsx
const updateName = (firstName: string, lastName: string) => {
  setFirstName(firstName);
  setLastName(lastName);
};

// 传递props时直接传函数引用
<FullName
  firstName=""
  lastName=""
  updateName={updateName}
/>

2. 子组件对应调整接口和调用逻辑：

interface NameProps {
  firstName: string;
  lastName: string;
  updateName: (first: string, last: string) => void;
}

function handleClick() {
  updateName(first, last);
}

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