ReactJs如何訪問DOM元素

我有一個問題，我想用全局變量訪問一個DOM元素在我的所有方法中使用它，我試圖用「this.refs」訪問它，但是它似乎只適用於形式和輸入？也許你知道一個更好的方法來做到這一點？這是我的一些代碼：ReactJs如何訪問DOM元素

` import從'react'反應;

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

類應用延伸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; 
}`

來源

2017-10-05 Clemence Lux

1）可以使用參考文獻回調兩者反應的組分和任何 DOM元素。這裏有一個參考： https://reactjs.org/docs/refs-and-the-dom

2）你應該避免全局變量。相反，您可以使用ES6模塊語法導出變量，並通過導入它來訪問任何其他文件。例如：

App.js

export const someVar = 'valueOfSomeVar';

someOtherFile.js

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

來源

2017-10-05 10:35:51 dominik791

不建議在訪問DOM作出反應，而不是可以讓組件並將其放置在您的組件層次結構中的想要的地方。

來源

2017-10-05 10:59:04

您可以對HTML元素使用ref回調並設置該組件的局部變量。

input type =「file」id =「file」ref = {（input）=> {this.textInput = input; }}

和使用它組件調用內部

this.textInput.focus();

對於功能組件可以使用參考文獻

INPUT TYPE = 「文件」 id =「file」ref =「uploader」

並在組件調用中使用它

this.refs.uploader.focus();

詳情：Refs

來源

2017-10-05 11:18:57 vijay22uk

ReactJs如何訪問DOM元素

回答

相關問題