Análise do uso de ref em reagir

o que é referência

Componentes não são nós reais do DOM. No desenvolvimento do react, o oficial não recomenda operar diretamente o DOM nativo. O nó DOM de um componente é uma estrutura de dados que existe na memória, chamada de DOM virtual. Se você precisar obter o nó DOM real do componente, precisará fornecer oficialmente o atributo ref.O React fornece referências para acessar elementos DOM criados no método render ou instâncias do componente React.
Existem três tipos de ref, vamos aprender dois aqui primeiro.

tipo de string

Veja o pequeno exemplo a seguir: Clicar no botão pode atribuir o valor da caixa de entrada à seguinte tag 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

Aqui usamos ref para obter o nó dom para operação e imprimimos this.refs após inserir os dados de entrada:
você pode ver que os dados da caixa de entrada são this.refs.haha.value,

mas esse método do tipo string foi eliminado . veja a seguir

criarRef criar

Primeiro, importe-o no topo da página e importe PureComponent aqui, porque o exemplo a seguir o usará

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

Escrevendo um:

1. Defina this.headerRefs = createRef() diretamente no construtor
2. Em seguida, vincule ref no componente que você precisa usar:

3. No tempo de clique do botão, use o atributo current para obter o nó ou componente DOM como uma instância, que é impresso aqui

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

A função está implementada, mas é um pouco difícil de implementar no construtor. Aqui está outra maneira de escrever:

Escrevendo dois:

Exiba o conteúdo de entrada para a tag p
1. Use o formato de headerRefs = createRef() para criar refs diretamente
2. Ligue os componentes a serem usados ​​< Header ref={this.headerRefs}/>
3. Use this.userRefs .current .innerHTML = this.inputRefs.current.value completa o 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

Confira o efeito: