本文转载自微信公众号「神奇的程序员K」,作者神奇的程序员K 。转载本文请联系神奇的程序员K公众号。
前言
20多天前,遇到一个日程表的业务需求,可以动态增加列、对单元格进行合并,结合公司的jsp项目的已有功能完成单元格的增、删、改操作。进行需求分析整理后,经过了一番查找,发现React版本的antd的表格组件功能很强大,可定制程度很高,可以助我完成这个业务需求的开发。
由于要和jsp进行交互,所以在实现过程中,遇到了一些难题踩了挺多坑,本文就跟大家分享下我从0到1实现这个需求的过程与思路,欢迎各位感兴趣的开发者阅读本文。
环境搭建
因为公司的项目是基于jsp的,antd本想用Vue版本的,无奈它与jsp的一些语法冲突了跑不起来,于是就尝试了react版本的antd,它跑起来了没有发现任何兼容性问题,一切正常。给React点个赞??。
由于要与项目中已有的功能进行交互,没法用脚手架,我只能以cdn的方式引入react,如下所示,按顺序引入react、axios、lodah以及antd所需要的文件。
- <script crossOrigin type="text/javascript" src="lib/react.production.min.js"></script>
- <script crossOrigin type="text/javascript" src="lib/react-dom.production.min.js"></script>
- <script src="lib/babel.min.js"></script>
- <script type="text/javascript" src="lib/moment.min.js"></script>
- <script src="lib/lodash.min.js"></script>
- <script type="text/javascript" src="lib/antd.min.js"></script>
- <script type="text/javascript" src="lib/axios.min.js"></script>
- <link rel="stylesheet" href="lib/antd.min.css">
上述用到的资源文件地址: react-antd-schedule/lib
我们需要把react相关代码写在text/babel标签中,如下所示,我们打印antd和react看看是否有值。
- <script type="text/babel">
- console.log("react");
- console.log(React);
- console.log("antd")
- console.log(antd);
- </script>
打开浏览器控制台,出现下述信息,代表我们的环境已经搭建成功。
image-20201119155715157
接下来,我们写个HelloWord来测试下效果。
- <div id="root" style="width: 94%;overflow: hidden"></div>
- <script type="text/babel">
- // 自定义hook
- const App = () => {
- const onChange = (date, dateString) => {
- console.log(date, dateString);
- }
- return (
- <div>
- React+antd引入成功
- <br />
- <antd.DatePicker onChange={onChange} />
- </div>
- );
- };
- ReactDOM.render(<App />, document.getElementById("root"));
- </script>
版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除