Question

我有问题，我想访问带有全局变量的DOM元素，以便在我的所有方法中使用它，我尝试使用“this.refs”访问它，但它似乎只适用于表单和输入？也许你知道更好的方法吗？以下是我的一些代码：

` 从'react'中导入React;

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

class App扩展了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

您可以对HTML元素使用ref回调并设置该组件的局部变量。

输入类型=＆＃34;文件＆＃34; ID =＆＃34;文件＆＃34; ref = {（input）=＆gt; {this.textInput = input; }

并在组件调用中使用它

this.textInput.focus();

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

输入类型=＆＃34;文件＆＃34; ID =＆＃34;文件＆＃34; REF =＆＃34;上载＆＃34;

并在组件调用中使用它

this.refs.uploader.focus();

详细信息：Refs

Answer 2

1）您可以对React组件和任何 DOM元素使用ref回调。这是一个参考： 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'

Answer 3

不建议您在React中访问DOM，而是可以创建组件并将其放置在所需位置的组件层次结构中。

ReactJs如何访问DOM元素

3 个答案: