O2OA開源免費開發平臺：在O2門戶頁面中使用React（一）

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

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

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

讓我們先從React開始吧！

版本要求

本文適用于如下版本：

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

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

在O2門戶頁面中使用React

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

第一步：創建門戶頁面

在O2平臺創建一個門戶，并新建一個頁面。在頁面中創建一個容器，標識為："div"。

第二步：創建React組件腳本

在門戶中創建一個腳本，命名為：like_button。

拷貝以下代碼：

'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。

(轉自公眾號：浙江蘭德網絡）