ReactJs comment accéder à l'élément DOM

Question

J'ai un problème, Je voudrais accéder à un élément DOM avec une variable globale pour l'utiliser dans toutes mes méthodes, J'ai essayé d'y accéder avec "this.refs" mais il semble être seulement pour les formes et les entrées? Peut-être connaissez-vous une meilleure façon de le faire? Voici une partie de mon code:

` import Réaction de 'react';

var isSmall = false; 
var isMedium = false; 
var isLarge = true; 

classe App étend React.Component {

openIframe() 
{ 

    var iframe = document.createElement('iframe'); 
    var siteUrl = document.getElementById('siteUrl').value; 
    var header = document.getElementById('header'); 

    iframe.src = ""; 
    iframe.src = siteUrl; 
    iframe.setAttribute('id', 'iframe'); 
    header.classList.add('scrollUp'); 

    setTimeout(function(){ 
     document.getElementById("iframe_append").appendChild(iframe); 
    },500); 
} 

reloadIframe() 
{ 
    var iframe = document.getElementById('iframe'); 
    iframe.src = iframe.src; 
}` 

Answer 1

1) Vous pouvez utiliser callbacks ref pour les composants et React tout élément DOM. Voici une référence: https://reactjs.org/docs/refs-and-the-dom

2) Vous devez éviter les variables globales. Au lieu de cela, vous pouvez exporter la variable en utilisant la syntaxe des modules ES6 et accéder à n'importe quel autre fichier en l'important. Par exemple:

app.js

export const someVar = 'valueOfSomeVar'; 

someOtherFile.js

import { someVar } from 'pathToApp.js'; 
console.log(someVar); // 'valueOfSomeVar' 

Answer 2

Il est déconseillé d'accéder DOM dans React au contraire, vous pouvez faire le composant et le placer dans la hiérarchie des composants dans votre endroit désiré.

Answer 3

1. Vous pouvez utiliser le callback ref sur les éléments HTML et définir la variable locale de ce composant.

   entrée type = "fichier" id = "fichier" ref = {(entrée) => {this.textInput = entrée; }}

et de l'utiliser à l'intérieur appel composant

this.textInput.focus(); 

2. Pour les composants fonctionnels, vous pouvez utiliser refs

   type d'entrée

   = "file" id = "file" ref = "uploader"

et de l'utiliser à l'intérieur composant composer

this.refs.uploader.focus(); 

Détails: Refs