O2OA提供了門戶平臺，使用可視化方式設(shè)計頁面，用于設(shè)計系統(tǒng)主頁、列表等系統(tǒng)中的各類頁面，在一定程度上降低了開發(fā)者的技能要求。但是對于有經(jīng)驗的前端開發(fā)人員，或者已經(jīng)習(xí)慣了使用前端開發(fā)框架的用戶，這種頁面設(shè)計模式的效率就顯得不合適了。

創(chuàng)新互聯(lián)主要從事成都網(wǎng)站設(shè)計、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)皮山,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):13518219792

本系列教程，我們就來講一下如何使用主流前端框架集成O2OA進行開發(fā)。主要包括現(xiàn)在主流的三個框架：React、VUE和Angular。

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

讓我們先從React開始吧！

版本要求

本文適用于如下版本：

O2OA版本要求：5.1及以上版本；

React版本：本文撰寫時，react版本是16.13.1。（更低的版本未經(jīng)驗證）

在O2門戶頁面中使用React

在很多情況下，我們不需要復(fù)雜的React應(yīng)用，通過僅僅幾行代碼并且無需使用構(gòu)建工具，即可在O2平臺門戶頁面中使用React。

第一步：創(chuàng)建門戶頁面

在O2平臺創(chuàng)建一個門戶，并新建一個頁面。在頁面中創(chuàng)建一個容器，標(biāo)識為："div"。

第二步：創(chuàng)建React組件腳本

在門戶中創(chuàng)建一個腳本，命名為：like_button。

拷貝以下代碼：

'use strict';conste=React.createElement;//創(chuàng)建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));

（如果是生產(chǎn)環(huán)境，請將React腳本的路徑中development替換為production。當(dāng)然你也可以下載js文件，放到O2服務(wù)器的webServer目錄下，建議放到o2_lib目錄，然后用正確的路徑加載它。）

第四步：完成

沒有第四步了。你剛剛已經(jīng)將第一個 React 組件添加到你的O2門戶頁面中了，現(xiàn)在您可以預(yù)覽它，看到實現(xiàn)的效果了。

經(jīng)過以上四步，您已經(jīng)用最簡單的方式，將React集成到O2OA中。如果您希望使用更大的Javascript工具鏈，我們將在下面的章節(jié)中介紹兩種方式使用Create React App腳手架集成O2OA。

(轉(zhuǎn)自公眾號：浙江蘭德網(wǎng)絡(luò)）