React hook 组件传值记录

在React hook中，使用 function 定义的组件，拿到props直接放到参数中就行了，简直爽到不能再爽了

比如有一个Menu菜单组件，通过用户的一些操作，然后把生成的结果传递给子组件

父组件传递

import React, {useState } from 'react'
// 引入子组件
import Menu from './menu/menu';
function Map() {
        // 定义需要传递的数据
        const [menuData, setMenuData] = useState([]);
        // 用户操作后赋值
        const mapRightClickHandle = () => {
                 const result =[1,2,3]
                setMenuData(result)
         }
         return (
                <div className='box'>
                         <div onClick={mapRightClickHandle}>Click Me</div>
                        <Menu menuData={menuData}></Menu>
                </div>
            );
}

子组件

import React, { useEffect } from 'react';
import './menu.scss'


interface MenuPropsType {
    menuData: any[]
}
function Menu(props: MenuPropsType) {
    useEffect(() => {
        renderMeun(props.menuData)
    }, [props.menuData])
    const renderMeun = (array: any[]) => {
        // 因为useEffect的执行机制，不管用户有没有操作的时候，都会执行这个方法，所以这个array刚开始会是 []
        if (!array.length) { return }
        // 在这里就可以操作父组件传递过来的数据了
        console.log(array)
    }
    return (
        <div className='menu'>
            menu
        </div>
    )
}

export default Menu;