javascript - 如何在纯 JavaScript 中调用 react 部署的组件(如部分视图)
问题描述
我在 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"
]
}
}
有没有人可以提出一个好的解决方案?
解决方案
如果您尝试在 2 个存储库之间共享代码,我建议将共享代码移动到单独的 npm 包中并在两个地方重用它,而无需从另一个页面获取脚本。
因此,您将拥有 2 个带有 react 应用程序的存储库,并且您将使用相同的 npm 包来实现共享功能。
如果这不是您的选择,则有一个肮脏的技巧:在您的 react 应用程序中,您检查quizid
容器是否存在(这意味着脚本在纯 JS 页面上执行)并尝试在那里挂载,否则您像现在一样挂载应用程序。在您的普通 JS 页面中,您可以像现在一样从另一个页面获取脚本。
推荐阅读
- webpack - 让 webpack 和 CRA 在 watch 模式下发出文件
- python - 无法在我的系统中正确利用客户端 SNI
- python - 如何在 python 中将结果导出到 .csv 文件时将每个输入图像名称与其预测相关联
- javascript - 同一页面上有两个 jQuery 版本 - 问题
- mongodb - 缓慢的 MongoDB 查询
- javascript - 等待 JQuery .when() 完成
- javascript - 将数组数据转换为列出项目和实例的对象javascript
- react-native - 使用 Expo 时如何忽略 fetch() 调用中的 SSL 证书问题?
- jupyter-notebook - nbextensions 的重复版本 - 如何知道要删除哪一个
- dygraphs - x 轴值的 dygraph 浮点数