温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

O2OA开源免费开发平台:在O2门户页面中使用React(一)

发布时间:2020-08-08 17:21:47 来源:ITPUB博客 阅读:155 作者:o2oa 栏目:编程语言

O2OA提供了门户平台,使用可视化方式设计页面,用于设计系统主页、列表等系统中的各类页面,在一定程度上降低了开发者的技能要求。但是对于有经验的前端开发人员,或者已经习惯了使用前端开发框架的用户,这种页面设计模式的效率就显得不合适了。

本系列教程,我们就来讲一下如何使用主流前端框架集成O2OA进行开发。主要包括现在主流的三个框架:React、VUE和Angular。

本系列文章适用于O2OA5.1及以后的版本。

让我们先从React开始吧!

版本要求

本文适用于如下版本:

O2OA版本要求:5.1及以上版本;

React版本:本文撰写时,react版本是16.13.1。(更低的版本未经验证)

在O2门户页面中使用React

在很多情况下,我们不需要复杂的React应用,通过仅仅几行代码并且无需使用构建工具,即可在O2平台门户页面中使用React。

第一步:创建门户页面

在O2平台创建一个门户,并新建一个页面。在页面中创建一个容器,标识为:"div"。

O2OA开源免费开发平台:在O2门户页面中使用React(一)

第二步:创建React组件脚本

在门户中创建一个脚本,命名为:like_button。

O2OA开源免费开发平台:在O2门户页面中使用React(一)

拷贝以下代码:

'use strict';conste=React.createElement;//创建React组件classLikeButtonextendsReact.Component{constructor(props) {super(props);this.state={liked:false};  }render() {if(this.state.liked) {return'You liked this.';    }returne('button',{onClick: ()=>this.setState({liked:true}) },'Like'    );  }}//获取组件容器(门户页面上的div容器)constdomContainer=this.page.get("div").node;//在容器中渲染React组件ReactDOM.render(e(LikeButton),domContainer);

第三步:页面中加载React

在刚刚新建的页面的afterload事件中,添加以下代码:

//引入React脚本o2.load(["https://unpkg.com/react@16/umd/react.development.js","https://unpkg.com/react-dom@16/umd/react-dom.development.js"],function(){//引入like_button组件this.include("like_button");}.bind(this));

(如果是生产环境,请将React脚本的路径中development替换为production。当然你也可以下载js文件,放到O2服务器的webServer目录下,建议放到o2_lib目录,然后用正确的路径加载它。)

第四步:完成

没有第四步了。你刚刚已经将第一个 React 组件添加到你的O2门户页面中了,现在您可以预览它,看到实现的效果了。

经过以上四步,您已经用最简单的方式,将React集成到O2OA中。如果您希望使用更大的Javascript工具链,我们将在下面的章节中介绍两种方式使用Create React App脚手架集成O2OA。

(转自公众号:浙江兰德网络)

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI