Javascript 如何在React中呈现div和脚本标记？

react应用程序接收到一个可视化代码，我使用unescape函数获取字符串形式的HTML代码。该字符串有一个div标记，其id为可视化，script标记由生成可视化的javascript组成

import React from "react";
import parse from "html-react-parser";

export default function App() {
  // This code is received from the backend
  const vizCode =
    "%3Cdiv%20id%3D'chartdiv_1614071920146'%3E%3C%2Fdiv%3E%3Cscript%20type%3D'text%2Fjavascript'%3E%20var%20width_1614071920146%20%3D%20700%3Bvar%20height_1614071920146%20%3D%20700%3Bvar%20chart_1614071920146%20%3D%20c3.generate(%7Bbindto%3A%20'%23chartdiv_1614071920146'%2C%20size%3A%20%7B%20width%3A%20(width_1614071920146%20-%2020)%2C%20height%3A%20(height_1614071920146%20-%2020)%20%7D%2C%20data%3A%20%7Bcolumns%3A%20%5B%20%5B'%20'%2C%201.0%2C%201.0%2C%203.0%2C%205.0%2C%205.0%5D%20%5D%2C%20type%3A%20'spline'%7D%2C%20legend%3A%20%7Bshow%3Afalse%7D%2C%20axis%3A%20%7B%20x%3A%20%7B%20type%3A%20'category'%2C%20categories%3A%20%5B'New%20Course'%2C'group%20course%201'%2C'Testkurs%20'%2C'test_course'%2C'Moodle4CollaborativeMOOCs'%5D%20%7D%20%7D%7D)%3B%3C%2Fscript%3E";
  const unescapedVizCode = unescape(vizCode);
  console.log(unescapedVizCode);
  // Output -> <div id='chartdiv_1614071920146'></div><script type='text/javascript'> var width_1614071920146 = 700;var height_1614071920146 = 700;var chart_1614071920146 = c3.generate({bindto: '#chartdiv_1614071920146', size: { width: (width_1614071920146 - 20), height: (height_1614071920146 - 20) }, data: {columns: [ [' ', 1.0, 1.0, 3.0, 5.0, 5.0] ], type: 'spline'}, legend: {show:false}, axis: { x: { type: 'category', categories: ['New Course','group course 1','Testkurs ','test_course','Moodle4CollaborativeMOOCs'] } }});</script> 

  let objectData = parse(unescapedVizCode);
  let divData = objectData[0];
  let scriptData = objectData[1].props.dangerouslySetInnerHTML.__html;

  return (
    <div className="App">
      {objectData}
    </div>
  );
}

这里我提供了链接

---

我使用了危险的LysetinerHTML来显示可视化，但无法可视化图表。我在公用文件夹中添加了test.html以在浏览器中显示可视化效果。非常感谢您的帮助。

我不确定它是否满足您的要求，但您可以使用window.open在iFrame或新选项卡中呈现HTML代码

要在iFrame中打开，请使用以下代码：

const unescapedVizCode = unescape(vizCode);
window.open(unescapedVizCode, "myFrame");
return (
<div className="App">
<iframe name="myFrame"></iframe>
  {objectData}
</div>
);

---

我不确定它是否满足您的要求，但您可以使用window.open在iFrame中或在新选项卡中呈现HTML代码

要在iFrame中打开，请使用以下代码：

const unescapedVizCode = unescape(vizCode);
window.open(unescapedVizCode, "myFrame");
return (
<div className="App">
<iframe name="myFrame"></iframe>
  {objectData}
</div>
);

尝试：

尝试：

---

好吧，这个答案正是你想要的，但我必须说：只有当你100%知道vizCode的来源并且它是可信的，才可以使用这个

您的问题是，浏览器没有执行脚本内容。我试过你的沙盒，当我添加

eval(scriptData)

以下是对我有效的全部代码：

export default function App() {
  // This code is received from the backend
  const vizCode =
    "%3Cdiv%20id%3D'chartdiv_1614071920146'%3E%3C%2Fdiv%3E%3Cscript%20type%3D'text%2Fjavascript'%3E%20var%20width_1614071920146%20%3D%20700%3Bvar%20height_1614071920146%20%3D%20700%3Bvar%20chart_1614071920146%20%3D%20c3.generate(%7Bbindto%3A%20'%23chartdiv_1614071920146'%2C%20size%3A%20%7B%20width%3A%20(width_1614071920146%20-%2020)%2C%20height%3A%20(height_1614071920146%20-%2020)%20%7D%2C%20data%3A%20%7Bcolumns%3A%20%5B%20%5B'%20'%2C%201.0%2C%201.0%2C%203.0%2C%205.0%2C%205.0%5D%20%5D%2C%20type%3A%20'spline'%7D%2C%20legend%3A%20%7Bshow%3Afalse%7D%2C%20axis%3A%20%7B%20x%3A%20%7B%20type%3A%20'category'%2C%20categories%3A%20%5B'New%20Course'%2C'group%20course%201'%2C'Testkurs%20'%2C'test_course'%2C'Moodle4CollaborativeMOOCs'%5D%20%7D%20%7D%7D)%3B%3C%2Fscript%3E";
  const unescapedVizCode = unescape(vizCode);
  console.log(unescapedVizCode);

  let objectData = parse(unescapedVizCode);
  let divData = objectData[0];
  let scriptData = objectData[1].props.dangerouslySetInnerHTML.__html;
  useEffect(()=>{
    eval(scriptData)
  }, [scriptData])
  return (
    <div className="App">
      {objectData}

    </div>
  );
}

---

好吧，这个答案正是你想要的，但我必须说：只有当你100%知道vizCode的来源并且它是可信的，才可以使用这个

您的问题是，浏览器没有执行脚本内容。我试过你的沙盒，当我添加

eval(scriptData)

以下是对我有效的全部代码：

export default function App() {
  // This code is received from the backend
  const vizCode =
    "%3Cdiv%20id%3D'chartdiv_1614071920146'%3E%3C%2Fdiv%3E%3Cscript%20type%3D'text%2Fjavascript'%3E%20var%20width_1614071920146%20%3D%20700%3Bvar%20height_1614071920146%20%3D%20700%3Bvar%20chart_1614071920146%20%3D%20c3.generate(%7Bbindto%3A%20'%23chartdiv_1614071920146'%2C%20size%3A%20%7B%20width%3A%20(width_1614071920146%20-%2020)%2C%20height%3A%20(height_1614071920146%20-%2020)%20%7D%2C%20data%3A%20%7Bcolumns%3A%20%5B%20%5B'%20'%2C%201.0%2C%201.0%2C%203.0%2C%205.0%2C%205.0%5D%20%5D%2C%20type%3A%20'spline'%7D%2C%20legend%3A%20%7Bshow%3Afalse%7D%2C%20axis%3A%20%7B%20x%3A%20%7B%20type%3A%20'category'%2C%20categories%3A%20%5B'New%20Course'%2C'group%20course%201'%2C'Testkurs%20'%2C'test_course'%2C'Moodle4CollaborativeMOOCs'%5D%20%7D%20%7D%7D)%3B%3C%2Fscript%3E";
  const unescapedVizCode = unescape(vizCode);
  console.log(unescapedVizCode);

  let objectData = parse(unescapedVizCode);
  let divData = objectData[0];
  let scriptData = objectData[1].props.dangerouslySetInnerHTML.__html;
  useEffect(()=>{
    eval(scriptData)
  }, [scriptData])
  return (
    <div className="App">
      {objectData}

    </div>
  );
}

---

React/JSX不处理脚本标记。 您必须显式地加载它。 我建议在组件可用时使用挂钩

useEffect=>{ const script=document.createElement'script'； script.innerHTML=脚本数据； getElementById'root'.appendChildscript； 返回=>{ getElementById'root'.removeChildscript； }; }, []; 此处的工作示例：

---

顺便说一句，请不要使用“unescape”，它已被弃用。改用“decodeURIComponent”。

React/JSX不处理脚本标记。 您必须显式地加载它。 我建议在组件可用时使用挂钩

useEffect=>{ const script=document.createElement'script'； script.innerHTML=脚本数据； getElementById'root'.appendChildscript； 返回=>{ getElementById'root'.removeChildscript； }; }, []; 此处的工作示例：

顺便说一句，请不要使用“unescape”，它已被弃用。改用“decodeURIComponent”