react ref节点操作

我就是我 2022-12-05 10:21 179阅读 0赞

## DOM节点操作 ##

### 1.字符串 ###

可以给标签添加ref属性，在组件挂载完成后就可以通过this.refs来DOM节点的操作

export default class Home extends Component { 
        render() { 
            return (
                <div>
                    <h1 ref="myh1">home页面</h1>
                </div>
            )
        }
        componentDidMount(){ 
            this.refs.myh1.innerHTML = '向英雄致敬'
        }
    }

### 2.回调函数 ###

ref属性可以用在普通标签上，也可以使用在子组件上，通过DOM节点操作来实现组件之间通信。

import React, {  Component } from 'react'
    import Child from './Child'
    export default class Home extends Component { 
        render() { 
            return (
                <div>
                    { /* <Child ref="mychild"/> */}
                    <Child ref={ (e)=>this.setChild(e)} />
                </div>
            )
        }
        componentDidMount(){ 
            // this.refs.myh1.innerHTML = '向英雄致敬'
            // console.log(this.refs)
        }
        setChild(el){ 
            //此时el就是子组件
            // console.log(el)
            el.setState({ 
                msg:'向英雄致敬'
            })
        }
    }

### 3.createRef API ###

react中给提供了一个createRef API方法，用它也可以来实现DOM节点操作

在构造函数中通过React.createRef来创建一个空的容器

constructor(){
        super();
        this.childEl = React.createRef();//this.childEl {current:null}
    }

在页面中使用标签或者子组件时，通过ref进行赋值

<Child ref={ this.childEl } />

此时this.childEl.current就是子组件

发表评论取消回复

表情：

评论列表（有 0 条评论，179人围观）

还没有评论，来说两句吧...

相关阅读

相关 react ref获取dom节点

在React中，可以使用ref来获取DOM节点的引用。以下是一些示例代码，说明如何使用ref来获取DOM节点：使用React.createRef()（React 16.3版

逃离我推掉我的手/ 2024年02月29日 00:44/ 0 赞/ 44 阅读

相关 react 之 ref

react提供一个refs的安全口，做到‘接触’或调用从render()返回的组件实例的方法、DOM节点。用法：1. ref Callback属性　　　ref 属性

川长思鸟来/ 2023年08月17日 16:20/ 0 赞/ 139 阅读

相关使用refs获取节点_「React基本功」refs详解

![5ee5f220846c8f5de04ed8e56bd3d9f7.png][] 「React基本功」refs详解\_乐闻世界-CSDN博客blog.csdn.net

不念不忘少年蓝@/ 2023年01月07日 08:59/ 0 赞/ 137 阅读

相关 react ref节点操作

DOM节点操作 1.字符串可以给标签添加ref属性，在组件挂载完成后就可以通过this.refs来DOM节点的操作 export default cla

我就是我/ 2022年12月05日 10:21/ 0 赞/ 180 阅读

相关 React.ClassAttributes＜HTMLDivElement＞.ref?: React.LegacyRef＜HTMLDivElement＞

(JSX attribute) React.ClassAttributes.ref?: React.LegacyRef Type ‘MutableRefObject’ is

àì夳堔傛蜴生んèń/ 2022年11月16日 05:43/ 0 赞/ 146 阅读

相关 React（15）ref

23、ref 用过 Vue 的同学，在使用 React 的 ref 时，注意不要混淆。在 Vue 中，ref 绑定的 DOM 元素，可以直接在组件实例里，通过 `th

蔚落/ 2022年05月31日 08:09/ 0 赞/ 257 阅读

相关 React Refs用法

Refs介绍 -------------------- Refs提供了一种访问在render方法中创建的DOM节点或者React元素的方法。在典型的数据流中，props

快来打我*/ 2022年05月26日 04:59/ 0 赞/ 256 阅读

相关 react的ref属性

1.组件的三大属性之二：ref属性 (1)组件内的标签都可以定义ref属性来标识自己（２）在组件内可以通过this.refs.refName找到对应的真实DOM对象

逃离我推掉我的手/ 2022年05月15日 10:39/ 0 赞/ 291 阅读

相关 React源码解析(四)：react-ref

平时我们可能会有这样的需求，就是需要获取某个dom节点或者子组件的实例来更新，而并不是只是通过props等来更新dom节点或者组件。如果没有一个好的方法我们可能自己去获取节点(

蔚落/ 2022年01月19日 23:27/ 0 赞/ 288 阅读

相关 react ref实现dom操作

ref两种写法添加ref后,将使用js的方式来操作标签第一种: (1)在构造函数中声明 this.

柔光的暖阳◎/ 2021年07月25日 02:35/ 0 赞/ 456 阅读