如何在 React 组件中使用全局定义的脚本
介绍
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 ，您可以调用外部库中的任何方法。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~