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

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


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.jquery.com/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>

这里

  • 通过CDN链接的jQuery库
  • 它按照传统方式通过 $（document）.ready 方法进行初始化
  • 并用于使用 jQuery 选择器（#jquery-root）和文本方法附加消息

接下来，打开 index.js （src/index.js） 并将我们的 你好 组件附加到根容器中，如下所示 -


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 库都会发出你好消息，如下所示 -

基于CreateRoot的集成

基于 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 插件集成

让我们尝试将流畅的 jquery 插件 （https://github.com/kenwheeler/slick） 集成到 react 组件中

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

create-react-app myapp
cd myapp
npm start

接下来，安装流畅的jQuery插件

npm install jquery slick-carousel --save

接下来，将 slick 插件包（css 和 assets）中的 slick 文件夹复制到应用程序的公共文件夹中。滑块文件夹的内容如下图所示 -

.
├── 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;

这里

  • 从道具中渲染了一个带有子元素的 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 光滑滑块将通过 React 组件渲染，如下所示 -

JQuery Slick插件集成

总结

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

本页
上一页
下一页