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

Question

I am receiving HTML with JS (which builds some graph) inside script tag in a string from API. ie.

{
   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>
`
}

I want to render that HTML inside my React Component which looks like

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

How can I do that?
Or is there any way to build graphs in HTML, bringing from APIs and render inside the React Component?

Answer 1

One way is to use dangerouslySetInnerHTML attribute and render the string content as JS code.

Like this

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 }}
     />
 );
}

UPDATE

Please find the working code-sandbox link https://codesandbox.io/embed/nice-ellis-qpw4e?fontsize=14&hidenavigation=1&theme=dark

Answer 2

You can use dangerouslySetInnerHTML Refer to this: https://reactjs.org/docs/dom-elements.html

But beware as it's risky as suggested by the name.