1.0.0 • Published 4 years ago
qyb-react-umd v1.0.0
qyb-react-umd
qyb-react-umd是一个集成React框架以及一些组件库(比如antd)的一个umd包。提供传统前端下使用组件化前端框架组件的一种方式,作为前端转型过渡方案。 如下是集成antd库表格示例
集成
把dist文件夹下qybreactumd.js拷贝到项目资源目录
目前qybreactumd.js 包含React基础框架和Antd组件库
在index页面引入qybreactumd.js
另外如果想用其他React组件库,并且其他组件库提供了umd打包,可以在下面继续引入对应的js。(如果需要一起打包到qybreactumd.js中,可联系公共组件重新打包或提供不同的umd文件)
<!-- 加载 React-->
<script src="assets/qybreactumd.js"></script>
<script src="assets/otherReactcomponentslib.umd.js"></script>
使用
定义容器div
<div id="content_ant_table" />
新建与渲染组件
// 如下就是上面示例图片中表格的全部基础代码
// 拿到React 和 ReactDOM 等框架相关对象。
var React = QybReactUmd.React
var ReactDOM = QybReactUmd.ReactDOM
const e = React.createElement;
// 拿到基础组件对象 antd对象下为所有antd的所有组件对象,使用方法参考antd文档
var AntTable = QybReactUmd.antd.Table
const columns = $params.columns
const datas = $scope.datas
// 根据基础组件新建业务组件(需要熟悉React框架函数组件使用)
var MyTable = function() {
const [state, setState] = React.useState({ text: "", checked: false })
return e(AntTable, {
columns: columns,
dataSource: data,
bordered: true,
size: "middle",
scroll: {
x: 'calc(700px + 50%)',
y: 240
}
});
}
ReactDOM.render(
e(MyTable),
document.getElementById('content_ant_table')
);
其他
- 目前打包了整个antd库,体积较大,gzip后依然达到700k左右。生产环境需开启gzip。如需减少体积,可以通过只打包使用到了的组件实现。
- 可以提取通用组件集成到库中来
- tsx转换成js工具
- Antd文档
- React文档
IE 下注意事项
- 兼容IE9+
- IE下不支持箭头函数,const 关键字,在写组件时应注意。
1.0.0
4 years ago