React远程动态组件怎么实现
远程动态组件实现
远程动态组件库
远程动态组件库项目结构如下所示：
. ├── babel.config.js ├── package.json ├── rollup.config.js └── src ├── Button.js ├── Text.js
我们简单实现了两个组件 Button 和 Text：
import React from 'react'
export default ({children}) => {
return {children}
} import React from 'react'
export default ({children}) => {
return {children}
} 我们使用 rollup 对其进行打包，之所以用 rollup 是因为其打包出来的代码非常简洁，方便我们查看，rollup 配置为：
import babel from 'rollup-plugin-babel'
import fs from 'fs'
const components = fs.readdirSync('./src')
export default components.map((filename) => {
return {
input: `./src/${filename}`,
output: {
file: `dist/${filename}`,
format: 'cjs',
},
plugins: [babel()],
}
})打包后的结果如下所示：
. ├── dist │ └── Button.js │ └── Text.js
其中 Button.js 如下所示：
'use strict'
var React = require('react')
function _interopDefaultLegacy(e) {
return e && typeof e === 'object' && 'default' in e ? e : {default: e}
}
var React__default = /*#__PURE__*/ _interopDefaultLegacy(React)
var Button = function (_ref) {
var children = _ref.children
return /*#__PURE__*/ React__default['default'].createElement(
'button',
{
style: {
color: 'blue',
},
},
children
)
}
module.exports = Button然后我们使用 http-server 在 dist 目录下开启一个静态文件服务，则可以通过 http://localhost:8080/Button.js 获取到打包后的代码。
远程组件库介绍完毕，接下来介绍业务项目中如何使用。
接入远程组件库
我们使用 create-react-app 创建一个 React 应用，并新增一个 DynamicComponent 组件：
const DynamicComponent = ({name, children, ...props}) => {
const Component = useMemo(() => {
return React.lazy(async () => fetchComponent(name))
}, [name])
return (
Loading...