react使用hook实现子组件给父组件简单传值 (可直接调用)

前言

有时候为了写代码的时候。使其组件化程度更高，很多地方都需要用到传值，并且有回传，这个地方就比较麻烦，特别是使用typescript这种语法的时候，这里简单记录一下怎么传值

父传子

这个相对比较简单，直接将值放在组件中，然后子组件中接受获取就行了

父组件中内容
     {countStatusDurationMap && countStatusAlterNumMap && <SingleDevice setDeviceId={setDeviceId} countStatusDurationMap={countStatusDurationMap} countStatusAlterNumMap={countStatusAlterNumMap} deviceListMap={deviceOptions}/> }

子组件中内容
type DeviceListProps = {
  code:string,
  name:string,
  items:CodeNameProps[]
}

interface DataChart {
   countStatusDurationMap: CountStatusDurationProps,
   countStatusAlterNumMap:CountStatusAlterNumProps,
   deviceListMap:DeviceListProps[],
   setDeviceId:any
}
const SingleDevice:FunctionComponent<DataChart> = (props) => {
通过props。。。获取
}

子传父 ：方法一 ！！！！

//父组件里面写子组件
const handleSerach = (e) => {
     console.log('调用当前子组件的方法',e)   //e的值为 aaa
 };
<PageMiddle handleSerach={handleSerach} /> 

//子组件接收
interface middleProps {
    handleSerach: any; //其实是function
}
const PageMiddle:React.FC<middleProps> = (prop) => {
	const onclick = ()=>{
		prop.handleSerach(aaa) //onclick为子组件的点击事件，然后 handleSerach 将 aaa 传到父组件
	}
}

子传父 ：方法二

比如有一个点击事件，需要从子组件中执行这个点击操作，但是父组件中需要用到这个值，没得办法，只能传了。
首先声明一个usestate

const [deviceId, setDeviceId] = useState()

然后再传入

<SingleDevice setDeviceId={setDeviceId}/>

子组件接受

然后点击事件οnclick={handlechange方法}

function handleChange(value:any) {
  // setOptionValue(value)
  props.setDeviceId(value[1])
  console.log(value)
}

这样在父组件中声明的deviceId就发生了变化。