Análisis del uso de ref en reaccionar

que es referencia

Los componentes no son nodos DOM reales. En el desarrollo de reacción, el oficial no recomienda operar directamente el DOM nativo. El nodo DOM de un componente es una estructura de datos que existe en la memoria, denominada DOM virtual. Si necesita obtener el nodo DOM real del componente, debe proporcionar oficialmente el atributo ref.React proporciona referencias para acceder a los elementos DOM creados en el método de representación o en las instancias del componente React.
Hay tres tipos de árbitros, aprenderemos dos aquí primero.

tipo de cadena

Mire el siguiente pequeño ejemplo: al hacer clic en el botón, puede asignar el valor del cuadro de entrada a la siguiente etiqueta p

import React, {
    
     Component } from 'react'

export class App extends Component {
    
    
    render() {
    
    
        return (
            <div>
                <input type='text' ref="haha" />
                <button onClick={
    
    this.getText}>点击</button>
                <p ref="user">user</p>
            </div>
        )
    }
    getText = () => {
    
    
        console.log(this.refs.haha.value)
        const user = this.refs.haha.value
        this.refs.user.innerHTML = user
    }
}

export default App

Aquí usamos ref para obtener el nodo dom para la operación e imprimimos this.refs después de ingresar los datos de entrada:
puede ver que los datos del cuadro de entrada son this.refs.haha.value,

pero este método de tipo de cadena se ha eliminado ver el siguiente

crearRef crear

Primero, impórtelo en la parte superior de la página e importe PureComponent aquí, porque el siguiente ejemplo lo usará

import React, {
    
     createRef, PureComponent } from 'react'

escribiendo uno:

1. Defina this.headerRefs = createRef() directamente en el constructor
2. Luego vincule ref en el componente que necesita usar:

3. En el tiempo de clic del botón, use el atributo actual para obtener el nodo o componente DOM como una instancia, que se imprime aquí

export class App extends PureComponent {
    
    
    constructor() {
    
    
        super()
        this.headerRefs = createRef()
    }
    render() {
    
    
        return (
            <div>App Page
                <Header ref={
    
    this.headerRefs}/>
                <button onClick={
    
    this.getText}>点击获取</button>
            </div>
        )
    }
    getText = () => {
    
    
        // 通过current属性去获取DOM节点或者组件是实例
        console.log(this.headerRefs.current.state.name)
  
    }
}

class Header extends PureComponent {
    
    
    state = {
    
    name: 'hello react'}
    render() {
    
    
        return (<div>header Component</div>)
    }
}

export default App

La función está implementada, pero es un poco problemático implementarla en el constructor.Aquí hay otra forma de escribir:

Escribiendo dos:

Muestre el contenido de entrada a la etiqueta p
1. Use el formato de headerRefs = createRef() para crear referencias directamente
2. Vincule los componentes que se usarán < Header ref={this.headerRefs}/>
3. Use this.userRefs .current .innerHTML = this.inputRefs.current.value completa el requisito

export class App extends PureComponent {
    
    

    headerRefs = createRef()
    inputRefs = createRef()
    userRefs = createRef()
    render() {
    
    
        return (
            <div>App Page
                <Header ref={
    
    this.headerRefs}/>
                <input type='text' ref={
    
    this.inputRefs} />
                <p ref={
    
    this.userRefs}>user</p>
                <button onClick={
    
    this.getText}>点击获取</button>
            </div>
        )
    }
    getText = () => {
    
    
        console.log(this.headerRefs.current.state.name)
        console.log(this.inputRefs)
        console.log(this.userRefs)
        this.userRefs.current.innerHTML = this.inputRefs.current.value
    }
}

class Header extends PureComponent {
    
    
    state = {
    
    name: 'hello react'}
    render() {
    
    
        return (<div>header Component</div>)
    }
}

export default App

Comprueba el efecto: