React 核心觀念就是物件導向，可是在實務上並不能排除需要 3rd party 的 JavaScript library / framework 的場合，本次使用到的即是 JavaScript DataSnap framework。
REACT IMPORT COMPONENT
React 預設是在 jsx 檔案 import 元件，例如：import Library from 'library-name'
這是載入 3rd party 元件的方式，對於只有 function 的 js 檔也可以如法泡製，接下來我就這樣寫：
Library.functionA(param1, param2)
得到【未定義】的結果。這顯然不是我要的答案。
過了許久，心想 React 可以 export function component，那現有的 3rd party function 應該也能如法泡製，於是我就改寫 3rd party js 內容，類似：
export function A(param1, param2)
果不其然，not define 的問題就自然解決了。
 |
| 紅框處為成功呼叫 Base64 函式回傳的字串 |
再看了一下原來的 library 的數量，不多，5 個 js + 數十個 function 等著我去改，別忘了還有一些全域變數，整理一下目前遇到的問題：
- 數十個 function 要加 export。
- 全域變數無法使用。 (not define 無可避免)
結論：
這麼複雜的解法肯定不是解法，那麼一定還有更方便的解決方式。REACT INCLUDE JAVASCRIPT LIBRARY
REACT 除了是物件導向外，還有一個特性：Single Page Application (SPA)。這意味著在 HTML 引入 js 檔案，全部的元件都能直接取用 js 裡的資源。
有方向就來改看看：
結果找不到函式。
難道 React 不支援 html 引入 js 函式？
這一卡，又是數日過去，我還卡在原地動彈不得。該死！
掃過世界各地論壇，沒找到我要的資訊，是關鍵字錯誤，還是不會有人採用這個作法，這個謎團難以解開。
一日，在向好友抱怨時，好友熱心地幫忙測了下我的專案，回傳了以下畫面：
這到底是怎麼辦到的！？
好友的解說是這樣的：
REACT 裡的 public 和 src 目錄並不直接相通，所以 index.html 要 include 的 js 檔案，根目錄必須要和 index.html 相同。連使用 Ajax 也不是問題：
使用 3rd party 套件，成功！
結論：
- REACT 的眉角真的多，但古老和現代套件還是能併用的，最後能解決這問題真是讚啦！
- 感謝好友的幫忙！
See also:
沒有留言:
張貼留言