HTML-React-Parser 返回 object - 不是字符串？

Question

I'm trying to parse some basic HTML - for example:

<p style="color: black">Hi Guys!</p>

into JSX code, and I'm using HTML-React-Parser. I've linked it into my HTML like so:

<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js">

And I'm attempting to use it here:

<script type="module">
  import bbCodeParser from "./node_modules/js-bbcode-parser/src/simple.js";
  const finishUpload = document.querySelector("#uploadFinish");
  const getTextButton = document.querySelector(".textUpload");

  function getURL() {
    var imageURL = document.querySelector(".headerInfo > div:nth-child(5)")
      .innerHTML;
    var imageURLParse = bbCodeParser.parse(imageURL);
    var myRegex = /<img[^>]+src="(https:\/\/[^">]+)"/g;
    var imageSRC = myRegex.exec(imageURLParse);
    console.log(imageSRC[1]);
  }

  getTextButton.addEventListener("click", function () {
    getText();
  });

  finishUpload.addEventListener("click", function () {
    getURL();
  });

  function getText() {
    var myContent = tinymce.activeEditor.getContent();
    var reactCode = HTMLReactParser('<p style="color: black">Hi Guys!</p>');
    console.log(reactCode);
  }
</script>
<script>
  const dateElement = document.querySelector("#date");
  var d = new Date();
  var months = [
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  month = months[d.getMonth()];
  day = d.getDate();
  year = d.getFullYear();
  time = new Date().toLocaleTimeString([], {
    hour: "2-digit",
    minute: "2-digit",
  });

  dateElement.innerHTML = `Posted on ${month} ${day}, ${year} at ${time}`;
</script>

It works fine, but the problem is that when I run it, it returns me an object like this:

{…}
​
"$$typeof": Symbol(react.element)
​
_owner: null
​
_self: null
​
_source: null
​
_store: Object { … }
​
key: null
​
props: Object { style: {…}, children: "Hi Guys!" }
​
ref: null
​
type: "p"
​
<prototype>: Object { … }

And I'm not really sure what to do with this. All I really need is a simple string. Any help would be greatly appreciated. Thanks in advance.

Answer 1

The HTMLReactParser converts an HTML string to one or more React elements. So the result will not be a string as you expected:

HTMLReactParser('<p style="color: black">Hi Guys!</p>');
// will be equal to React.createElement('p', { style: 'color: black' }, 'Hi Guys!')

Can check some examples in their document:

<ul>
  {HTMLReactParser(`
    <li>Item 1</li>
    <li>Item 2</li>
  `)}
</ul>

Ref: https://www.npmjs.com/package/html-react-parser