介绍
React 可用于创建各种 Web 应用。React 的灵活性使开发人员能够轻松地将其嵌入到现有的 Web 应用中。但将 React 嵌入到当前系统中意味着除了 React 之外，还需使用其他库或脚本。
React 使用虚拟 DOM 来操作网页上的 DOM 节点，而大多数其他库可能会直接进行 DOM 操作。因此，在本指南中，您将学习如何在 React 组件中使用全局定义或外部添加的脚本。
声明全局变量
全局变量在脚本标记内定义，独立于 React 应用。此全局变量可以是出于 SEO 目的需要在页面上预渲染的数据，也可以包含用户的信息。
全局变量可以定义如下。
<script>
window.user = {
id: 3,
name: "John Doe",
}
</script>
访问全局变量
window是浏览器环境中的全局对象。附加到 window 对象的任何属性都可以从网页上的任何脚本访问，包括 React 应用的脚本。
由于window是一个全局对象，React 代码也可以访问其属性，如下所示。
import React from "react";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
user: window.user,
};
}
render() {
const { user } = this.state;
return (
<div>
<p> ID: {user.id} </p>
<p> Name: {user.name} </p>
</div>
);
}
}
您也可以直接访问全局对象的属性，而无需使用窗口对象。但这会使代码难以调试，因为用户对象定义的位置不明显。通过窗口对象访问任何属性都会明显表明它是全局定义和设置的。
在 React 组件中使用外部脚本
现在，有时您可能需要一个没有自己的 React 组件或可能与 React 工作方式不同的库 - 例如 jQuery。
jQuery 是一个流行的 JavaScript 库，但它不使用虚拟 DOM；相反，它直接操作 DOM。因此，在本节中，您将学习如何在 React 组件中使用 jQuery。
假设您需要在单击按钮时隐藏用户信息。为此，您可以使用 jQuery 的hide()方法。您通常会将 DOM 选择器传递给 jQuery。但是在 React 中使用 jQuery 时，您需要提供一个ref。
ref提供了一个接口来访问在React 组件的render方法中定义的 DOM 节点。您可以使用React.createRef()方法创建ref。要获取实际的 DOM 元素，请将ref传递给react-dom的findDOMNode()方法，因为您要直接操作 DOM 节点。
import React from "react";
import { findDOMNode } from "react-dom";
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
user: window.user,
};
this.domRef = React.createRef();
}
hideInfo = () => {
const $ = window.$;
const el = findDOMNode(this.domRef);
$(el).hide();
};
render() {
const { user } = this.state;
return (
<div>
<button onClick={this.hideInfo}>Hide Info</button>
<div ref={this.domRef}>
<p> ID: {user.id} </p>
<p> Name: {user.name} </p>
</div>
</div>
);
}
}
结论
我不建议将直接进行 DOM 操作的库与 React 一起使用。这可能会导致代码中的错误，而这些错误可能很难追踪，尤其是在企业级应用中。但有时您可能希望使用特定的库来满足完成应用程序的特定要求。在这种情况下，使用 React ref来访问挂载在网页上的 DOM 节点，然后使用 ref ，您可以调用外部库中的任何方法。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
