在反应应用程序中使用脚本渲染 html 文件

Question

我有一个带有脚本标签的 html 文件和一些链接。 当我用 html 文件渲染它时，它会带来结果，我的意思是一个图表，但是当我在 react js 应用程序中使用危险的 SetInnerHTML 渲染它时，它不会渲染，也不会带来我的图表。

这是我从后端（api）获取的 html 代码

  const html =  `<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link
  href="somelink"
  rel="stylesheet"
/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="app-chart-container">
  <canvas class="app-charts" id="line-chart-40197" dir="ltr"></canvas>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.9.3/Chart.min.js"></script>
<script>
  $(document).ready(function () {
    $("[data-toggle='tooltip']").tooltip({ placement: "right" });
  });
  var ctx = document.getElementById("line-chart-40197");
  if (ctx) {
    ctx.height = 300;
    var myChart = new Chart(ctx, {
      type: "line",
      data: {
        labels: [
          "92/3",
          "92/6",
          "92/9",
          "92/12",
          "93/3",
          "93/6",
          "93/9",
          "93/12",
          "94/3",
          "94/6",
          "94/9",
          "94/12",
          "95/3",
          "95/6",
          "95/9",
          "95/12",
          "96/3",
          "96/6",
          "96/9",
          "96/12",
          "97/3",
          "97/6",
          "97/9",
          "97/12",
          "98/3",
          "98/6",
          "98/9",
          "98/12",
          "99/3",
          "99/6",
        ],
        type: "line",
        defaultFontFamily: "VazirFD",
        datasets: [
          {
            label: "شرکت",
            data: [
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "0",
              "-262",
              "-262",
              "-262",
              "-262",
              "66793",
              "70787",
              "122463",
              "591087",
              "591088",
              "597421",
              "600635",
              "614257",
              "1304086",
              "1320727",
              "1352606",
              "2830629",
              "3016812",
              "3042351",
              "3126253",
            ],
            backgroundColor: "transparent",
            borderColor: "#9d0606",
            borderWidth: 2,
            pointStyle: "circle",
            pointRadius: 3,
            pointBorderColor: "transparent",
            pointBackgroundColor: "#9d0606",
            type: "line",
          },
        ],
      },
      options: {
        responsive: true,
        tooltips: {
          mode: "index",
          titleFontSize: 12,
          titleFontColor: "#000",
          bodyFontColor: "#000",
          backgroundColor: "#fff",
          defaultFontFamily: "VazirFD",
          titleFontFamily: "VazirFD",
          bodyFontFamily: "VazirFD",
          cornerRadius: 3,
          intersect: true,
          callbacks: {
            label: function (tooltipItem, data) {
              return (
                data.datasets[tooltipItem.datasetIndex].label +
                " : " +
                tooltipItem.yLabel
                  .toString()
                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",")
              );
            },
          },
        },
        legend: {
          display: true,
          rtl: true,
          labels: {
            usePointStyle: true,
            fontFamily: "VazirFD",
          },
        },
        scales: {
          xAxes: [
            {
              stacked: false,
              display: true,
              gridLines: {
                display: true,
                drawBorder: false,
              },
              scaleLabel: {
                display: true,
                labelString: "سال مالی",
                fontFamily: "VazirFD",
              },
              ticks: {
                fontFamily: "VazirFD",
                fontColor: "#9aa0ac",
                minRotation: 90,
                callback: function (value, index, values) {
                  return value.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                },
              },
            },
          ],
          yAxes: [
            {
              stacked: false,
              display: true,
              gridLines: {
                display: true,
                drawBorder: false,
              },
              scaleLabel: {
                display: false,
                labelString: "میلیون ریال",
                fontFamily: "VazirFD",
              },
              ticks: {
                margin: 20,
                fontFamily: "VazirFD",
                fontColor: "#9aa0ac",
                minRotation: 0,
                callback: function (value, index, values) {
                  var processValue = value;
                  if (value >= 1000 && value < 1000000) {
                    processValue = value / 1e3 + "K";
                  } else if (value >= 1000000 && value < 1000000000) {
                    processValue = value / 1e6 + "M";
                  } else if (value >= 1000000000) {
                    processValue = value / 1e9 + "B";
                  } else if (value < 0 && value <= -1000 && value > -1000000) {
                    processValue = value / 1e3 + "K";
                  } else if (
                    value < 0 &&
                    value <= -1000000 &&
                    value > -1000000000
                  ) {
                    processValue = value / 1e6 + "M";
                  } else if (value < 0 && value <= -1000000000) {
                    processValue = value / 1e9 + "B";
                  }
                  return processValue
                    .toString()
                    .replace(/\B(?=(\d{3})+(?!\d))/g, ",");
                },
              },
            },
          ],
        },
        title: {
          display: true,
          text: "روند سودآوری TTM (میلیون ریال)",
          fontFamily: "VazirFD",
        },
      },
    });
  }
</script>

这是我的 html 文件。 但我对反应的渲染有疑问 当我用

编译这个文件时

这是我想要渲染该 html 代码的反应组件（我的 html 代码有一些脚本标签）

import React from "react";

export default function Dashboard() {
     return (
       <div dangerouslySetInnerHTML={{__html: html }} />
     )
}

  

我没有正确获取我的 html 文件。 并且 react 不会渲染它。

当我将此文件打开到 .html 文件中时，它可以工作，但在反应中不会呈现任何东西。 我如何在反应中渲染这个文件请帮助我

Answer 1

我最近不得不这样做，因为我正在使用的 API 返回 HTML 内容。您可以使用像 html-to-react 这样的库来为您解析 HTML 并将其转换为 React 组件，然后您可以在您的 React 应用程序中使用该组件。在我的例子中，我创建了一个组件，以便我可以在需要显示 HTML 内容的任何地方重用这个逻辑。

import { useMemo } from 'react';
import { Parser } from 'html-to-react';

const HTMLContent = (props) => {
  const htmlToReactParser = useMemo(() => new Parser(), []);
  const parsedHTML = htmlToReactParser.parse(props.html);

  return <div className={styles['blog-html-content']}>{parsedHTML}</div>;
};