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 (
                
Click Me
); }

子组件

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 (
        
menu
) } export default Menu;

你可能感兴趣的:(React hook 组件传值记录)