html - 如何在反应中加载带有脚本标签的外部静态 HTML 页面?
问题描述
我想加载一个静态 html 文件,其中包含脚本标签作为反应组件。我尝试了html-loader方法,但这是将 html 文件转换为字符串,但该字符串未在反应 DOM 中正确呈现。
下面是我的示例 html 文件。
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis.css" type="text/css" />
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.16.1/vis-network.min.js"> </script>
<center>
<h1>Test</h1>
</center>
<!-- <link rel="stylesheet" href="../node_modules/vis/dist/vis.min.css" type="text/css" />
<script type="text/javascript" src="../node_modules/vis/dist/vis.js"> </script>-->
<style type="text/css">
#mynetwork {
width: 900;
height: 450;
background-color: #ffffff;
border: 1px solid lightgray;
position: relative;
float: left;
}
</style>
</head>
<body>
<div id = "mynetwork"></div>
<script type="text/javascript">
// initialize global variables.
var edges;
var nodes;
var network;
var container;
var options, data;
// This method is responsible for drawing the graph, returns the drawn network
function drawGraph() {
var container = document.getElementById('mynetwork');
// parsing and collecting nodes and edges from the python
nodes = new vis.DataSet([{"id": 0, "label": 0, "shape": "dot", "size": 5}, {"id": 17, "label": 17, "shape": "dot", "size": 5}, {"id": 56, "label": 56, "shape": "dot", "size": 5}, {"id": 65, "label": 65, "shape": "dot", "size": 5}, {"id": 68, "label": 68, "shape": "dot", "size": 5}]);
edges = new vis.DataSet([{"from": 0, "to": 17, "weight": 10.1990327835083}, {"from": 0, "to": 56, "weight": 11.132073402404785}, {"from": 0, "to": 65, "weight": 11.344696998596191}, {"from": 0, "to": 68, "weight": 10.370659828186035}, {"from": 0, "to": 76, "weight": 11.320157051086426}, {"from": 0, "to": 82, "weight": 10.778494834899902}, {"from": 0, "to": 94, "weight": 11.241415977478027}]);
// adding nodes and edges to the graph
data = {nodes: nodes, edges: edges};
var options = {
"configure": {
"enabled": false
},
"edges": {
"color": {
"inherit": true
},
"smooth": {
"enabled": false,
"type": "continuous"
}
},
"interaction": {
"dragNodes": true,
"hideEdgesOnDrag": false,
"hideNodesOnDrag": false
},
"physics": {
"enabled": true,
"stabilization": {
"enabled": true,
"fit": true,
"iterations": 1000,
"onlyDynamicEdges": false,
"updateInterval": 50
}
}
};
network = new vis.Network(container, data, options);
return network;
}
drawGraph();
</script>
</body>
</html>
在 webconfig.js 我添加了以下代码
{
test: /\.html$/,
exclude: /node_modules/,
use: {loader: 'html-loader'}
},
这就是我在反应中呈现的方式
import Page from "./Sample.html";
var htmlDoc = { __html: Page };
<div dangerouslySetInnerHTML={htmlDoc} />
问题是它没有显示图表。但我可以看到<h1>
标签填充在页面顶部,但看不到图表。
如何解决这个问题?
感谢任何帮助谢谢
解决方案
你可以使用 dangerouslySetInnerHTM 道具。这个问题已经在stackoverflow上得到了回答。看看React:如何加载和渲染外部 html 文件? 这将解决您的问题
推荐阅读
- php - 购物车页面 Woocommerce 中的自定义“条款和条件”接受复选框
- mongodb - Mongodb没有连接到本地主机?
- c++ - c++/qt 如何拥有一个全局静态变量
- django - 如何在验证之前在 Django 中的模型中设置字段?
- visual-studio - Visual Studio 输出终端
- python - 如何在 Python 的 print 函数中读取数组的元素?
- forms - Flutter textfield 中文输入法崩溃
- php - PHP Sqlite 脚本在 bindparam 指令上失败
- scala - spark根据新行删除前一行,条件匹配
- mysql - SQL - 将多个类别插入列