Javascript 如何在React组件中使用脚本标记呈现Html？

我从API中收到了一个字符串形式的HTML，其中包含脚本标记中的JS（它构建了一些图形）。即

{
   template: `
<p>Hello here is the chart!</p>

<div>
  <div id="piechart"></div>

  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>

  <script type="text/javascript">
    // Load google charts
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);

    // Draw the chart and set the chart values
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Task', 'Hours per Day'],
        ['Work', 8],
        ['Eat', 2],
        ['TV', 4],
        ['Gym', 2],
        ['Sleep', 8]
      ]);

      // Optional; add a title and set the width and height of the chart
      var options = { 'title': 'Old Allocation', 'width': `100 % `, 'height': 300 };

      // Display the chart inside the <div> element with id="piechart"
      var chart = new google.visualization.PieChart(document.getElementById('piechart'));
      chart.draw(data, options);
    }
  </script>
</div>
`
}

{
模板：`
你好，这是图表

//加载谷歌图表
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
//绘制图表并设置图表值
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
[‘工作’，8]，
[Eat'，2]，
[TV'，4]，
[Gym'，2]，
[Sleep'，8]
]);
//可选；添加标题并设置图表的宽度和高度
var options={'title'：'Old Allocation'，'width'：'100%`，'height'：300}；
//使用id=“piechart”在元素内显示图表
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
}
`
}

我想在我的React组件中呈现HTML

import React, { Component } from 'react'
class ChartComponent extends Component {
    render() {
        return (
            <div>
                <p>Here is the chart Component</p>

                {/* Here i want to render Html template coming from API's */}
            </div>
        )
    }
}

export default ChartComponent

import React，{Component}来自“React”
类ChartComponent扩展组件{
render（）{
返回(
这是图表组件

{/*这里我想呈现来自API的*/}的Html模板
)
}
}
导出默认图表组件

我该怎么做？

---

或者，是否有任何方法可以用HTML构建图形，从API引入并在React组件内部呈现？

一种方法是使用

危险的HTML

属性并将字符串内容呈现为JS代码

像这样

function DevScript(props) {
  /// hardcoding the data just for demo purpose
 const devCode = `
 // Load google charts
   google.charts.load('current', { 'packages': ['corechart'] });
   google.charts.setOnLoadCallback(drawChart);

   // Draw the chart and set the chart values
   function drawChart() {
     var data = google.visualization.arrayToDataTable([
       ['Task', 'Hours per Day'],
       ['Work', 8],
       ['Eat', 2],
       ['TV', 4],
       ['Gym', 2],
       ['Sleep', 8]
     ]);

     // Optional; add a title and set the width and height of the chart
     var options = { 'title': 'Old Allocation', 'width': "100 %", 'height': 300 };

     // Display the chart inside the <div> element with id="piechart"
     var chart = new google.visualization.PieChart(document.getElementById('piechart'));
     chart.draw(data, options);
 `; 
 return (
     <script
       type="text/javascript"
       dangerouslySetInnerHTML={{ __html: devCode }}
     />
 );
}

函数DevScript（props）{
///硬编码数据仅用于演示目的
常量devCode=`
//加载谷歌图表
load（'current'，{'packages'：['corechart']}）；
google.charts.setOnLoadCallback（drawChart）；
//绘制图表并设置图表值
函数绘图图（）{
var data=google.visualization.arrayToDataTable([
[“任务”，“每天工作小时数”]，
[‘工作’，8]，
[Eat'，2]，
[TV'，4]，
[Gym'，2]，
[Sleep'，8]
]);
//可选；添加标题并设置图表的宽度和高度
var options={'title'：'Old Allocation'，'width'：'100%，'height'：300}；
//使用id=“piechart”在元素内显示图表
var chart=new google.visualization.PieChart（document.getElementById（'PieChart'）；
图表绘制（数据、选项）；
`; 
返回(
);
}

更新

请找到工作代码沙盒链接

---

您可以使用

危险的LysetinerHTML

请参阅：

---

但是要小心，因为它的名字暗示了它的风险。

检查这个……它对我有用，请看一看它对codesandbox也不起作用(