前言
在vue3中,
- 子组件会使用
defineExpose
暴露出父组件需要访问的变量
或方法
- 父组件通过
ref
函数定义子组件的refName
,并通过refName.value.xxx
继续访问
react 中呢?
可使用 useImperativeHandle
、forwardRef
、useRef
文章来源:https://www.toymoban.com/news/detail-855543.html
第一步,子组件
- 使用
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 (
<Modal
title="查看平台详情"
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比较接近文章来源地址https://www.toymoban.com/news/detail-855543.html
- 父组件通过
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;
到了这里,关于react 父组件调用子组件的属性或方法的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!