react 子组件ref_从业务中去学习React

最新推荐文章于 2022-08-17 22:26:21 发布
最新推荐文章于 2022-08-17 22:26:21 发布
阅读量74 收藏
点赞数
文章标签： react 子组件ref
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_36070797/article/details/112444811
版权

从业务中去学习React

在辛苦忙碌了两个多月之后，我终于有时间来写一写博客啦，尽管我当初给自己规定的目标是每一个星期出一篇。在业务工作当中我透支了全部精力，没办法静心去写，现在终于有时间啦。

Vue2.0 VS React16.8

毫无疑问，现在市场上的公司用的不是Vue就是React，这里的Vue当然指的是Vue2.0。除此之外，Ng的市场份额远不及Vue以及React，所以目前前端的技术栈就大致上分为：以React为主导的React技术栈和以Vue为主导的Vue技术栈。

我是由Vue技术栈转的React技术栈的前端开发工程师。

我使用React的时间其实真的不太久，不过一年时间。我个人认为对于React的深刻了解以及学习方式都来自于我使用Vue时的经验，它使我快速精进，下面我们就从最常用的组件通讯作为入口，做一个分析。

一、Props&&Events(属性下发以及事件上传)
404fadcb3d5342303ed20ccbae37791c.png

如上图: 其父级组件Outer与子组件Inner的通讯，通过在outer中注册一些属性下发给Inner组件，这种方式就是React以及Vue中最普通的通讯方式：Props 。

通常，我们会在父组件中定义一些属性或者是事件，然后将这一些属性作为Inner的属性赋值，类似于原html标签中的data-*。在原生的html或者是Jquery中我们可以将一些数据缓存在html标签的data- * 属性中。这样可以通过DOM或者是BOM的事件获取目标元素之后，访问缓存在目标对象中的

最低0.47元/天 解锁文章
神秘还作业
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
移动端中文输入法输入过程中,但是还未选择结果时不断触发onChange事件解决方法
ishell1021的博客
03-30 846
使用compositionstart和compositionend事件来监听开始使用中文输入法和结束使用. compositionstart:输入法编辑器开始新的输入合成时会触发compositionstart事件。 例如，当用户使用拼音输入法开始输入汉字时，这个事件就会被触发。 compositionend:当文本段落的组成完成或取消时,compositionend事件将被触发. 如中文输入,语音识别或移动中的字词建议输入完成或取消时. 由于co...
REACT immutable数据 redux react-redux redux-thunk styled-components（innerRef 传数据）
hopefullman的博客
10-03 253
在模仿简书项目时候用到的技术点总结，做下总结： React 只能兼容IE8以上版本 关于字体图标 react-icons npm install react-icons --save import { FaBeer,FaPen } from 'react-icons/fa'; <FaPen/> 里面fa代表 fontawesome 简写 pen代表你的图标 关于全局样式 st...
React Hooks: useRef, useImperativeHandle, forwardRef的使用方法
nihaio25的博客
12-24 885
大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象，进而对子组件进行修改，是一个很方便的特性。在传统类组件中，我们通过使用 React.createRef() 创建的，并通过 ref属性附加到 React 元素来使用。而随着hooks的越来越广泛的使用，我们有必要了解一下在函数式组件中，如何使用Ref. 想要在函数式组件中使用Ref，我们必须先了解两个Api,useRef和forwardRef
react项目：简书
weixin_46438810的博客
08-17 350
react仿简书
vue中的ref，refs使用
前端菜鸟
07-25 4575
比如我有这么一个需求：v-if=’condition ‘组件中有一个input，每次显示组件的时候，input获得焦点；我这么写 this.condition = true; this.$refs.input1.focus(); 发现，this.$refs每次都是undefined； 问题原因：渲染组件需要时间，并且时间没有JS执行的快；所以获取不到 解决办法：第一种利用setTimeou...
react 子组件ref_React之ref详细用法
weixin_30346649的博客
12-23 933
在react典型的数据流中，props传递是父子组件交互的唯一方式；通过传递一个新的props值来使子组件重新re-render,从而达到父子组件通信。当然，就像react官网所描述的一样，在react典型的数据量之外，某些情况下(例如和第三方的dom库整合，或者某个dom元素focus等)为了修改子组件我们可能需要另一种方式，这就是ref方式。ref 简介React提供的这个ref属性，表示为对...
react 子组件ref_React函数式组件使用Ref
weixin_31935149的博客
01-13 1072
目录：简介useRefforwardRefuseImperativeHandle回调Ref简介大家都知道React中的ref属性可以帮助我们获取子组件的实例或者Dom对象，进而对子组件进行修改，是一个很方便的特性。在传统类组件中，我们通过使用 React.createRef() 创建的，并通过 ref属性附加到 React 元素来使用。而随着hooks的越来越广泛的使用，我们有必要了解一下在函数式...
前端React中函数式hooks组件中关于ref使用介绍，以及forwardRef 与 useImperativeHand详解
11-30
在React开发中，`ref`是一个非常重要的特性，它允许我们获取到React组件或DOM元素的实例，以便直接操作它们。在类组件中，我们通常使用`createRef()`来创建`ref`，而在函数式组件中，则使用`useRef()`。 1. **类...
React中Ref 的使用方法详解
10-15
在React中，Ref（引用）是一种机制，允许开发者直接访问DOM元素或React组件实例。这在需要对组件进行直接操作，如聚焦输入框、触发动画或者与第三方库集成时非常有用。本文将详细讲解React中Ref的使用方法。 首先，...
ScrollMagic的React组件_JavaScript_HTML_下载.zip
04-21
为了在HTML中与React组件结合，你需要将`MyAnimatedComponent`渲染到页面上： ```jsx ReactDOM.render(, document.getElementById('root')); ``` 这就是在React应用中使用ScrollMagic的基本步骤。你可以根据需求...
学习React中ref的两个demo示例
12-10
在这个例子中，我们创建了一个名为`App`的React组件。首先，通过`React.createRef()`创建了一个`ref`对象`inputRef`。在`componentDidMount`生命周期方法中，我们为`inputRef.current`（即实际的DOM元素）添加了一...
react-change-highlight:react不断突出变化的React组件:high_voltage:
05-07
React变化亮点 React Change Highlight是一个React组件，用于突出显示已包装组件中的更改，以增强UX，并将用户的注意力吸引到某些部分（例如，电子商务应用程序中的购物车）的已更改值中。 这是我在项目中使用的真实...
react-react面试题之构建组件的方式.zip
最新发布
03-20
在React开发中，组件是构建用户界面的基本单元。掌握各种构建组件的方式对于任何React开发者来说都至关重要。在React面试中，面试官可能会考察你对组件创建的理解和实践能力。以下是一些关于React构建组件的核心知识...
react_property_cross:学习React.js
05-19
这个名为"react_property_cross"的学习资源很可能包含了关于React组件、状态管理和props传递等相关概念的教程或示例代码。 在React中，组件是构建用户界面的基本单元。它们可以被视为独立的、可重用的代码块，每个...
React组件refs的使用详解
11-27
在从 render 方法中返回 UI 结构之后，你可能想冲出 React 虚拟 DOM 的限制，在 render 返回的组件实例上调用某些方法。通常来说，这样做对于应用中的数据流动是不必要的，因为活跃的数据（ React
Styled-Components初探
weixin_34124939的博客
11-20 314
概览 props调整组件样式 attrs封装组件属性 extend或者styled(Component)实现组件样式继承 使用innerRef代替ref ThemeProvider helper实现主题功能 keyframes helper实现动画界面 injectGlobal设置全局样式 基础用法import React, { Component } from 'react'; import ...
react 基础开发遇到的 bug
qq_43477721的博客
07-13 521
1.使用 styled-components 报错信息 Failed to compile ./src/style.js Attempted import error: 'injectGlobal' is not exported from 'styled-components'. 报错代码 import { injectGlobal } from 'styled-components'; injectGlobal` html, body, div, span, applet, object, ifr
React Hook父组件获取子组件的数据/函数
weixin_30457551的博客
09-06 6651
我们知道在react中，常用props实现子组件数据到父组件的传递，但是父组件调用子组件的功能却不常用。文档上说ref其实不是最佳的选择，但是想着偷懒不学redux，在网上找了很多教程，要不就是hook的讲的太少，要不就是父子组件傻傻分不清，于是只好再啃了一下文档，就学了一下其它hook的api。 在这里我们需要用到useImperativeHandle这个api，其函数形式为 useI...
react 函数组件ref调用子组件中的方法打印ref.current是undefined
07-13
您好！对于函数组件，我们无法直接在函数组件上使用 ref 属性。但是，您可以使用 `useRef` 钩子来创建一个 ref 对象，并将其传递给子组件。 下面是一个示例，展示了如何在父组件中调用子组件的方法并访问子组件中的 ref： ```jsx import React, { useRef } from 'react'; // 子组件 const ChildComponent = React.forwardRef((props, ref) => { const childMethod = () => { console.log('Child method called'); }; // 将 ref 关联到子组件的某个元素上 React.useImperativeHandle(ref, () => ({ childMethod, })); return <div>Child Component</div>; }); // 父组件 const ParentComponent = () => { const childRef = useRef(null); const callChildMethod = () => { childRef.current.childMethod(); }; return ( <div> <ChildComponent ref={childRef} /> <button onClick={callChildMethod}>Call Child Method</button> </div> ); }; ``` 在这个例子中，我们使用 `useRef` 创建了一个 `childRef` 对象，并将其传递给子组件 `ChildComponent` 的 `ref` 属性。然后，我们在 `ChildComponent` 中使用了 `React.useImperativeHandle` 将子组件中的方法关联到 `ref` 上。最后，我们在父组件中调用 `childRef.current.childMethod()` 来调用子组件的方法。 希望能对您有所帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值