Теги Div и Script в React с использованием проблемы HTML-React-Parser
Приложение реакции получило код визуализации, и я использовал функцию unescape, чтобы получить коды HTML в String. Строка имеет тег div с идентификатором визуализации и тег скрипта, который состоит из 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);
let objectData = parse(unescapedVizCode);
let divData = objectData[0];
let scriptData = objectData[1].props.dangerouslySetInnerHTML.__html;
return (
<div className="App">
{objectData}
</div>
);
}
Здесь я предоставил ссылку на коды и ящик
Я использовал опасноSetInnerHtml для отображения визуализации, но не смог визуализировать диаграмму. Я добавил test.html в общую папку, чтобы показать визуализацию в браузере. Любая помощь горячо приветствуется.