如何在TypeScript中将useState的setState函数传递给子组件？

你的问题核心出在子组件的参数接收逻辑上：React函数组件的入参是单个props对象，不是拆分的两个独立参数。你现在把word和setword当成两个参数传入，导致setword实际拿到的是组件上下文而非父组件传递的setter函数，这就是报错的根源。

修复步骤 #

1. 修正参数解构方式
   将子组件的参数从 (word, setword) 改为 ({ word, setword })，这样才能正确从props对象中提取传递的属性。

2. 修复JSX语法错误
   返回的JSX需要单个根容器包裹，同时button标签的写法要规范（闭合标签+添加显示文本）。

修复后的子组件代码 #

interface Props {
  word: string
  setword: React.Dispatch<React.SetStateAction<string>>;
}

const VoicetoText: React.FC<Props> = ({ word, setword }) => {
  return (
    <div>
      {word}
      <button onClick={() => setword('hey buddy')}>点击修改文本</button>
    </div>
  )
}

补充说明 #

• React.FC的默认入参是props对象，所有父组件传递的属性都包含在这个对象里，必须通过解构或.props的方式访问。
• JSX要求返回内容必须有单个根元素，否则会触发React语法错误。

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