ReactJS如何访问DOM元素

Question

我有问题，我想访问具有用于在我所有方法中使用它的全局变量的DOM元素，我试图用" this.refs"访问它，但似乎仅适用于表格和输入？也许您知道一种更好的方法？这是我的一些代码：

` 从" 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;
}`

Answer 1

1. 您可以在HTML元素上使用参考回调，并设置该组件的本地变量。

   input type =" file" id =" file" ref = {（input）=> {this.textinput = input;}}

并在组件中使用它

this.textInput.focus();

2. 对于功能组件，您可以使用refs

   输入type =" file" id =" file" ref =" uploader"

并在组件中使用它

this.refs.uploader.focus();

详细信息：refs

Answer 2

1）您可以使用Ref回调对React组件和 dom element。这是一个参考：https://reactjs.org/docs/refs-and-the-dom

2）您应该避免全局变量。相反，您可以使用ES6模块语法导出变量，并通过导入任何其他文件中的访问。例如：

app.js

export const someVar = 'valueOfSomeVar';

一些hotherfile.js

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

Answer 3

不建议您访问react中的dom，您可以将组件制作并将其放在所需的位置中。