如何在純 JavaScript 中調用已部署的組件（如局部視圖）

Question

我在 reactjs 中開發了一些組件。 現在我想在 JavaScript 中調用這段代碼。

我已經在某處部署了反應組件。 現在我想在我的 JavaScript 代碼中使用。

我們不能使用 iframe。 我們想將 reactjs 組件放在 div（quizid）中。

我正在嘗試的內容如下：

<div class="row clearfix">
    <div class="col-md-12" data-noedit data-module="quiz-module" data-module-desc="quiz" >
      <div id='quizid'>  
        </div>
     </div>
</div>
    <script>
            var docReady = function (fn) {
            var stateCheck = setInterval(function () {
            if (document.readyState !== 'complete') return;
            clearInterval(stateCheck);
            try { fn() } catch (e) { }
            }, 1);
            };
            docReady(function () {
            
             var xmlhttp = new XMLHttpRequest();
             xmlhttp.onreadystatechange = function() { 
             if (xmlhttp.readyState == XMLHttpRequest.DONE) {
             if (xmlhttp.status == 200) { debugger; 
             var parser = new DOMParser(); 
             var newNode = parser.parseFromString(xmlhttp.responseText, 'text/html');
             if(newNode && newNode.documentElement){ 
             document.getElementById('quizid').appendChild(newNode.documentElement);
             } 
            } else { 
            console.log("Status error: " + xmlhttp.status);
            }
            }
            };
            xmlhttp.open("GET", "http://phpstack-444580-2225309.cloudwaysapps.com/KitchenQuestionApp/", true);
            xmlhttp.send();            
            }); 
        </script>
        

在上述方法中，整個 html 都進入 quizid div 並且不顯示任何內容。

我記得，Asp.Net MVC 中有一個 Partial View 術語。 我們可以使用類似的東西嗎？

react組件版本通過(package.json)開發

{
    "name": "test",
    "version": "0.1.0",
    "private": true,
    "homepage": "/KitchenQuestionApp/",
    "dependencies": {
        "@testing-library/jest-dom": "^5.14.1",
        "@testing-library/react": "^11.2.7",
        "@testing-library/user-event": "^12.8.3",
        "bootstrap": "^4.6.0",
        "node-sass": "^4.14.1",
        "react": "^17.0.2",
        "react-bootstrap": "^1.6.1",
        "react-bootstrap-range-slider": "^2.0.2",
        "react-dom": "^17.0.2",
        "react-icons": "^4.2.0",
        "react-router-dom": "^5.2.0",
        "react-scripts": "4.0.3",
        "react-slick": "^0.28.1",
        "slick-carousel": "^1.8.1",
        "smooth-scroll": "^16.1.3",
        "web-vitals": "^1.1.2"
    },
    "scripts": {
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
    },
    "eslintConfig": {
        "extends": [
            "react-app",
            "react-app/jest"
        ]
    },
    "browserslist": {
        "production": [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ],
        "development": [
            "last 1 chrome version",
            "last 1 firefox version",
            "last 1 safari version"
        ]
    }
}
  

有沒有人可以為它提出一個好的解決方案？

Answer 1

如果您嘗試在 2 個存儲庫之間共享代碼，我建議將共享代碼移動到單獨的 npm 包中並在兩個地方重用它，而無需從另一個頁面獲取腳本。

因此，您將擁有 2 個帶有 React 應用程序的存儲庫，並且您將使用相同的 npm 包來實現共享功能。

如果這不是您的選擇，則有一個骯臟的 hack：在您的quizid應用程序中，您檢查quizid容器是否存在（這意味着腳本在純 JS 頁面上執行）並嘗試安裝在那里，否則您像現在一樣安裝應用程序。 在您的普通 JS 頁面中，您可以像現在一樣從另一個頁面獲取腳本。