父组件给子组件传值传方法的两种方式

1.方式一 <BannerEdit {…bannerEditConfig} />

父

// 新增、编辑弹窗配置
	const [bannerEditConfig, setBannerEditConfig] = useState({
		visible: false,
		title: "新增banner",
	});

// 新增或者编辑预约单
	const openBannerEdit = (row) => {	
		if (row) {
			setBannerEditConfig({
				visible: true,
				type: "edit",
				title: "编辑banner",
				closeBannerEdit: closeBannerEdit,
				cities: cities,
				details: { ...row },
			});
		} else {
			setBannerEditConfig({
				visible: true,
				type: "add",
				title: "新增banner",
				closeBannerEdit: closeBannerEdit,
				cities: cities,
			});
		}
	};

<BannerEdit {...bannerEditConfig} />

子

const BannerEdit = (props, ref) => {
	const { visible, type, title, closeBannerEdit, details, cities } = props; //父组件传过来的值或者方法
	...
}

2.方式二 noticeEditRef.current.showModal(text, ‘modify’, cities)}

父

import React, {useCallback, useEffect, useRef, useState} from "react";
...
const noticeEditRef = useRef();

<a style={{marginRight: 8}} onClick={() => noticeEditRef.current.showModal(text, 'modify', cities)}>编辑</a>

<Button onClick={() => noticeEditRef.current.showModal('', '', cities)}>发布通知</Button>

<NoticeEdit noticeEditRef={noticeEditRef} reload={() => getList()}/>

子

import React, {useState, useImperativeHandle, useCallback, useRef} from 'react';
// useImperativeHandle 可以让你在使用 ref 时自定义暴露给父组件的实例值。
...
const NoticeEdit = ({noticeEditRef, reload}) => {
...
useImperativeHandle(noticeEditRef, () => {
        return {
            showModal: (record, type, cities) => {
                console.log('record', record)
                console.log('type', type)
                setCityList(cities)
                if (type === 'modify' || type === 'detail') {
                    getDetail(record);
                    setEditType(type);
                }
                setLoading(false);
                setModalShow(true);
            }
        }
    })
}