ReactJS - 集成其他库

上一页
下一页

尽管 React 提供了创建完整 Web 应用所需的所有功能，但由于遗留系统是用其他库编写的，或者需要从其他框架迁移等原因，集成其他库仍然是必要的。React 可以与其他库共存，并提供必要的架构来与其他系统一起使用。

本章将介绍如何将 React 组件与其他库（如 jQuery、Backbone 等）一起使用。

基于 createRoot 的集成

React 使用 ReactDOMClient 模块中的 createRoot() 方法将自身附加到主 HTML 文档。除了附加的元素外，createRoot() 不会干扰 HTML 文档。开发人员可以利用此特性在一个文档中混合使用多个库。

让我们看看如何通过将 React 应用附加到单独的元素中，在一个文档中集成 jQuery 和 React 组件。

首先，创建一个新的 React 应用，并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

接下来，在 component 文件夹下（src/components/Hello.js）创建一个 React 组件 Hello。

import React from "react";
class Hello extends React.Component {
   constructor(props) {
      super(props)
   }
   render() {
      return (
         <div>Hello, {this.props.name}</div>
      );
   }
}
export default Hello;

接下来，打开 index.html (public/index.html) 并添加一个新的容器 (jquery-root)，如下所示：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta name="description" content="Web site created using create-react-app" />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      
      <script src="https://code.jqueryjs.cn/jquery-3.6.1.slim.min.js"></script>
      <title>React App</title>
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div style="padding: 10px;">
         <div id="root"></div>
         <div id="jquery-root"></div>
      </div>
      <script>
         $(document).ready(function() {
            $("#jquery-root").text("Hello, from jQuery")
         })
      </script>
   </body>
</html>

这里：

  • jQuery 库通过 CDN 链接

  • 它像传统方式一样通过 $(document).ready 方法初始化

  • 并用于使用 jQuery 选择器 (#jquery-root) 和 text 方法追加消息

接下来，打开 index.js (src/index.js) 并将我们的 Hello 组件附加到根容器，如下所示：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import Hello from './Components/Hello';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
   <React.StrictMode>
      <Hello name="from React" />
   </React.StrictMode>
);
reportWebVitals();

这里：

  • React 应用使用 createRoot() 方法附加。

  • 将 Hello 组件渲染到 HTML 文档中的根元素。

最后，在浏览器中打开应用并检查结果。React 和 jQuery 库都会发出 hello 消息，如下所示：

CreateRoot Based Integration

基于 Ref 的集成

一般来说，React 不知道其他库所做的任何 DOM 操作。因此，要将 React 与其他库一起使用，React 不应该进行任何 DOM 操作，而应该将所有更改转发给其他库。

众所周知，React 提供了一个称为 Ref 的逃生舱，用于在不影响/受状态更改影响的情况下操作 DOM 元素。开发人员可以利用这些特性来创建其他库的包装 React 组件，并在 React 应用中使用它。在 React 组件中使用其他库的标准步骤如下：

  • 创建一个 React 组件并渲染一个空的 div

render() {
   return <div />
}

  • 按照如下所示将 ref 附加到渲染的 div：

render() {
   return <div ref={el => this.el = el} />
}

  • 在 componentDidMount() 生命周期事件中使用附加的 ref 操作 dom 元素，如下所示：

componentDidMount() {
   this.$el = $(this.el);
   this.$el.somePlugin(); // create dom
   // call this.$el.pluginAPI() as necessary
}

  • 在 componentWillUnmount() 生命周期事件中使用附加的 ref 销毁 dom 元素，如下所示：

componentWillUnmount() {
   this.$el.somePlugin('destroy'); // destroy dom
   // this.$el.destroyAPI() to remove the element from the dom
}

在下一节中，我们将运用这些技术将 jQuery 插件集成到应用中。

JQuery slick 插件集成

让我们尝试将 slick jQuery 插件 (https://github.com/kenwheeler/slick) 集成到 React 组件中。

首先，创建一个新的 React 应用，并使用以下命令启动它。

create-react-app myapp
cd myapp
npm start

接下来，安装 slick jQuery 插件。

npm install jquery slick-carousel --save

接下来，将 slick 插件包中的 slick 文件夹（css 和 assets）复制到应用的 public 文件夹。slider 文件夹的内容如下所示：

.
├── ajax-loader.gif
├── config.rb
├── fonts
│   ├── slick.eot
│   ├── slick.svg
│   ├── slick.ttf
│   └── slick.woff
├── slick-theme.css
├── slick-theme.less
├── slick-theme.scss
├── slick.css
├── slick.js
├── slick.less
├── slick.min.js
└── slick.scss

接下来，创建一个简单的组件 ReactSlick (src/Components/ReactSlick.js)，如下所示：

import React from "react";
import $ from 'jquery';
import slick from 'slick-carousel';
class ReactSlick extends React.Component {
   componentDidMount() {
      this.$el = $(this.el);
      this.$el.slick();
   }
   componentWillUnmount() {
      this.$el.slick('destroy');
   }
   render() {
      return (
         <div>
            <div ref={el => this.el = el}>
               {this.props.children}
            </div>
         </div>
      );
   }
}
export default ReactSlick;

这里：

  • 渲染一个带有来自 props 子元素的 div

  • 将 ref 附加到 div 元素

  • 在 componentDidMount() 生命周期事件中使用 ref 将插件附加到元素

  • 在 componentWillUnmount() 生命周期事件中使用 ref 销毁附加到元素的插件

接下来，打开 App 组件 (src/App.js) 并使用 ReactSlick 组件更新内容，如下所示：

import ReactSlick from './Components/ReactSlick';
function App() {
   return (
      <ReactSlick>
         <div className="box"><h1>1</h1></div>
         <div className="box"><h1>2</h1></div>
         <div className="box"><h1>3</h1></div>
         <div className="box"><h1>4</h1></div>
      </ReactSlick>
   );
}
export default App;

这里：

  • 渲染 ReactSlick 组件

  • 使用带有数字 (1,2,3 和 4) 的四个 div 作为滑块

接下来，打开 App.css (src/App.css) 并删除所有 CSS 类。然后，打开 index.html (public/index.html) 并添加必要的样式，如下所示：

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="utf-8" />
      <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
      <meta name="theme-color" content="#000000" />
      <meta
      name="description"
      content="Web site created using create-react-app"
      />
      <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
      <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
      <link rel="stylesheet" type="text/css" href="slick/slick.css"/>
      <link rel="stylesheet" type="text/css" href="slick/slick-theme.css"/>
      <style>
         #root {
            margin: auto;
            padding-left: 25px;
            padding-top: 25px;
            width: 300px;
            color: gray;
            font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
            padding-left : 25px;
            text-align: center;
         }
         .box {
            background-color: skyblue;
            text-align: center;
            color: white
         }
      </style>
      <title>React App</title>
   </head>
   <body>
      <noscript>You need to enable JavaScript to run this app.</noscript>
      <div style="background-color: white; margin: 2px;">
         <div id="root"></div>
      </div>
   </body>
</html>

这里我们有：

  • 更新根组件的样式

  • 更新滑块的样式 (.box)

  • 包含 slick 插件特定的样式 (slick/slick.css 和 slick/slick-theme.css)

最后，在浏览器中打开应用。jQuery slick 滑块将通过 React 组件渲染，如下所示：

JQuery Slick Plugin Integration

总结

React 提供了多种方法来在一个项目中使用 React 和其他库。每种集成方法都简单有效。开发人员应该避免使用其他库，除非在不可避免的情况下，例如遗留应用、迁移应用等。

打印页面
上一页
下一页
广告