我想要写一个示例，让Child修改Parent组件的状态， 但是如何定义Child的Props的修改Parent的状态的type呢？

Question

我想要写一个示例，让Child修改Parent组件的状态，
但是如何定义Child的Props呢？

// parent
import React, { useState } from 'react'

import Child from './child'

function Parent() {

  const [msg, setMsg] = useState('111')

  return (
    <div style={{ backgroundColor: 'blue' }}>{msg}
      <Child handleClick={setMsg}></Child>
    </div>
  )
}

export default Parent

// child 
import { Button } from 'antd'
import React from 'react'



type ChildProps = {
  handleClick: //  这里应该如何定义呢？
}

function Child(props: ChildProps) {
  return (
    <div style={{backgroundColor: 'red'}}>child
      <Button 
        onClick={() => {
          props.setMsg('您好')
        }}>
        点击
      </Button>
    </div>
  )
}

export default Child

代码如上述，如何定义ChildProps 的hanldClick的type呢？

Answer 1

handleClick: (msg: string) => void
handleClick: React.Dispatch<React.SetStateAction<string>>;