TypeScript环境下无法将函数作为props传递给React子组件如何解决？

问题原因 #

这个报错是TypeScript类型校验导致的，你没有给子组件AddToList声明props类型，TS默认子组件的props是空对象，自然识别不到你从父组件传过来的handleState属性。
除了这个报错外，你的代码还有几处逻辑错误需要一起修复：

• 父组件泛型参数传递错误，state定义和setState调用不符合接口规范
• 子组件调用handleState时没有传入要求的四个参数
• 子组件handleChange里错误把输入值包裹成了数组

修复步骤 #

1. 修复父组件代码 #

export interface IPeople {
  name: string,
  age: number,
  description:string,
  note ?: string 
}
export interface IState {
  people: IPeople[]
}

// React.Component泛型第一位是props类型，第二位是state类型，你之前传错了
class App extends React.Component<{}, IState> {
  state: IState = {
    people: [
      {
        name : "",
        age : 0,
        description: "",
        note: ""
      }
    ]
  }

  handleState = (name: string,age : number,description : string,note ?: string) => {
    // 把新提交的人追加到人员列表数组
    this.setState(prev => ({
      people: [...prev.people, {name, age, description, note}]
    }))
  }

  render(){
    return (
      <div>
        <h1> List of People </h1>
        <List people={this.state.people} />
        <AddToList handleState={this.handleState}/>
      </div>
    );
  }
}

2. 修复子组件代码 #

// 声明子组件的props类型，告诉TS父组件会传什么属性过来
interface AddToListProps {
  handleState: (name: string, age: number, description: string, note?: string) => void
}

class AddToList extends React.Component<AddToListProps> {
  state = {
    name : "",
    description : "",
    age: "",
    note:""
  }
  render(){
    const handleChange = (e : React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
      this.setState({
        ...this.state,
        // 去掉多余的数组包裹，直接存储输入值
        [e.target.name] : e.target.value
      })
    }
    const handleClick = () => {
      const {name, description, age, note} = this.state
      if(!name || !description || !age ){
        return 
      }
      // 给父组件方法传入四个参数，age转为数字类型
      this.props.handleState(name, Number(age), description, note)
      // 提交后清空输入框
      this.setState({
        name : "",
        description : "",
        age: "",
        note:""
      })
    }
    return (
      <div className="AddToList">
        <input type="text" placeholder="name" value={this.state.name} onChange={handleChange} name="name"/>
        <input type="text" placeholder="description" value={this.state.description} onChange={handleChange} name="description"/>
        <input type="text" placeholder="age" value={this.state.age} onChange={handleChange} name="age"/>
        <textarea placeholder="note" value={this.state.note} onChange={handleChange} name="note"/>
        <button onClick={handleClick}>Add</button>
      </div>
    )
  }
}

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