react 父组件调用子组件的属性或方法

前言

在vue3中，

子组件会使用 defineExpose 暴露出父组件需要访问的 变量 或 方法
父组件通过 ref 函数定义子组件的 refName，并通过 refName.value.xxx 继续访问

react 中呢？

可使用 useImperativeHandle、forwardRef、useRef

第一步，子组件

使用 useImperativeHandle 定义要暴露出去的内容，第一个参数是 ref
forwardRef 包裹 App 组件后，再暴露出去

import React, { useState, useImperativeHandle, forwardRef } from "react";
import { Modal, Button } from "antd";const App = (props, ref) => {const [isModalOpen, setIsModalOpen] = useState(false);const [data, setData] = useState({});const showModal = () => {setIsModalOpen(true);};const handleCancel = () => {setIsModalOpen(false);};// 暴露给父组件访问（useImperativeHandle、forwardRef、ref组合使用）useImperativeHandle(ref, () => ({openModal: (data) => {showModal();setData(data);},}));return (<Modaltitle="查看平台详情"open={isModalOpen}onCancel={handleCancel}width={700}footer={null}><div><Button type="primary" onClick={handleOk}>确定</Button></div></Modal>);
};
const Index = forwardRef(App);
export default Index;

第二步，父组件

这一步跟vue3比较接近

父组件通过 useRef 定义子组件的 ref 属性
通过 refName.current.xx 再继续访问子组件暴露出的内容

import React, { useRef } from "react";
import { Button } from "antd";
import Title from "../components/Title";
import DetailModal from "../components/DetailModal";// 渲染
const App = () => {const detailRef = useRef();// 查看详情function handleDetail(row) {detailRef.current.openModal(row);}return (<><Title title="境内平台管理"><Button type="primary">新建平台</Button></Title><DetailModal ref={detailRef} /></>);
};
export default App;