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元素

回答

相关问题