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

这篇具有很好参考价值的文章主要介绍了react 父组件调用子组件的属性或方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

前言

在vue3中,

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

react 中呢?

可使用 useImperativeHandleforwardRefuseRef

第一步,子组件

  • 使用 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模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【React】组件三大核心属性

    🚩🚩🚩 💎个人主页: 阿选不出来 💨💨💨 💎个人简介: 一名大二在校生,学习方向前端,不定时更新自己学习道路上的一些笔记. 💨💨💨 💎目前开发的专栏: JS 🍭Vue🍭React🍭 💨💨💨 state是组件对象最重要的属性,值是对象(可以包含多个key-value的组合)。 组件被成为

    2024年01月18日
    浏览(35)
  • React组件实例的三大属性

    React组件实例的三大属性分别是:state、props和refs。 State属性:用来存储组件内部的状态,只能在组件内部修改。当state被修改时,React会重新渲染组件。 Props属性:用来传递父组件的数据到子组件中,是组件的只读属性,无法在子组件中修改。当props被修改时,React会重新渲染

    2024年02月13日
    浏览(35)
  • React Native 桥接组件封装原生组件属性

    自定义属性可以让组件具备更多的灵活性,所以有必要在JS 层通过自定义属性动态传值。 因为 ViewManager 管理了整个组件的行为,所以要新增组件属性也需要在这里面(如 InfoViewManager)进行定义。 1、在InfoViewManager 中定义一个 setAvatar 方法。 @ReactProp 是 React Native 中的注解,用

    2024年01月21日
    浏览(41)
  • 面试题-React(七):React组件通信

    在React开发中,组件通信是一个核心概念,它使得不同组件能够协同工作,实现更复杂的交互和数据传递。常见的组件通信方式:父传子和子传父 一、父传子通信方式 父组件向子组件传递数据是React中最常见的一种通信方式。这种方式适用于将数据从一个上层组件传递到其直

    2024年02月11日
    浏览(45)
  • React 组件的3大属性: state

    组件被称为\\\"状态机\\\", 页面的显示是根据组件的 state 属性的数据来显示。 state 是一个用于存储和管理组件内部数据的机制。 它是一种在组件中跟踪状态变化的方式,以便在数据发生变化时,React 可以更新用户界面以反映这些变化。 state 的使用在构建交互式和动态的用户界面

    2024年02月10日
    浏览(40)
  • React 组件的3大属性: refs

    Refs(引用)是 React 中用于访问组件中的 DOM 元素或其他 React 组件实例的一种机制。它们提供了一种途径,使你可以在React中直接操作和访问DOM元素,或者在React组件之间进行通信。 用途: 焦点的管理、文本的选择、媒体的播放; 强制触发动画; 继承三方 DOM 库; 字符串 R

    2024年02月06日
    浏览(43)
  • react 组件之间的通信(父子组件)

    React中 组件内调用其他组件不需要进行 类似于vue 声明组件(components) React 组件内调用其他组件 直接将组件导入 放置在对应的JSX 代码中 父子组件通信(传统): 1、父组件-子组件  通过属性传递 2、子组件-父组件  父组件通过将自身的函数对象传递给子组件, 子组件执行父组件

    2024年02月08日
    浏览(67)
  • React -- 组件通信

    A-B 父子通信 B-C 兄弟通信 A-E 跨层通信 **实现步骤 ** 父组件传递数据 - 在子组件标签上绑定属性 子组件接收数据 - 子组件通过props参数接收数据 props可以传递任意的合法数据 ,比如数字、字符串、布尔值、数组、对象、函数、JSX props是只读对象 子组件只能读取props中的数据,

    2024年02月19日
    浏览(45)
  • React 组件通信-全面解析

    这段代码包括一个父组件 App 和一个子组件 Module ,实现了父子组件之间的通信。 在父组件 App 中,使用 useState 来定义了一个状态 defaultTodo ,并初始化为 defaultTodos 。 defaultTodos 是从 ./components/module/contentData 文件中导入的一个默认的待办事项列表。 App 组件中定义了两个回调函

    2024年02月15日
    浏览(49)
  • React组件之间通信

    1-1、安装 1-2、使用 A组件 B组件 1-3、总结

    2024年02月16日
    浏览(45)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包