ReactJs DOM 요소에 액세스하는 방법

Question

문제가 있습니다. 내 모든 방법에서 DOM 요소에 액세스하기 위해 전역 변수를 사용하고 싶습니다. "this.refs"를 사용하여 액세스하려했지만 형식과 입력에 대해서만 보이는 것입니까? 아마도 더 나은 방법을 알고있을 것입니다. 여기 내 코드 중 일부는 다음과 같습니다.

` import React 'react';

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

클래스 응용 프로그램은 모두 구성 요소 반응에 대한 심판 콜백을 사용하고 어떤 DOM 요소 수 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)을 확장합니다. 참조는 다음과 같습니다. https://reactjs.org/docs/refs-and-the-dom

2) 전역 변수는 피해야합니다. 대신 ES6 모듈 구문을 사용하여 변수를 내보내고 가져 오기를 통해 다른 파일에 액세스 할 수 있습니다. 예를 들면 :에서 DOM에 액세스하지 않는 것이 좋습니다

App.js

export const someVar = 'valueOfSomeVar'; 

someOtherFile.js

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

Answer 2

대신 반작용 당신은 구성 요소를 확인하고 귀하의 구성 요소 계층 구조에 배치 할 수 있습니다 원하는 장소.

Answer 3

1. HTML 요소에서 ref 콜백을 사용하고 해당 구성 요소의 로컬 변수를 설정할 수 있습니다.

   입력 유형 = "파일"id = "파일"ref = {(입력) => {this.textInput = 입력; }}

및 구성 요소 호출 내에서 그것을 사용하는

this.textInput.focus(); 

사용할 수있는 기능 구성 요소의

을

입력 유형 = "파일"심판 id = "파일"ref = "업 로더"

그리고 구성 요소 호출

개

this.refs.uploader.focus(); 

세부 사항 : Refs