为什么反应不编译 state 中存在的 HTML

Question

I set a default value of a state to be <b> Hey </b> . Now when I rendered this state on the UI it printed the string instead of Hey wrote in bold.I want to know why it is not working. Why react is not able to interpret the html tag and show the appropriate output

import { useState } from "react";
import "./styles.css";

export default function App() {
  const [html, setHtml] = useState("<b>Hey</b>");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div>{html}</div>
    </div>
  );
}

Output:-

Was expecting the output to be Hey written in bold.

Here's the codesandbox link for better understanding:-https://codesandbox.io/s/heuristic-chaum-vo6qt?file=/src/App.js

Thank you. I just want to know why react is not able to render the HTML tag as HTML tag instead of printing it out.

Answer 1

Because you are rendering a string, not HTML. If you want to render stringified HTML then use dangerouslySetInnerHTML , use caution what you pass through, in other words, you may want to run the string through a DOM purifier first.

export default function App() {
  const [html, setHtml] = useState("<b>Hey</b>");
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <div dangerouslySetInnerHTML={{ __html: html}} />
    </div>
  );
}

Answer 2

You are setting the value of html as "<b>Hey</b>" which is a string string that's why it renders that as it is. You can directly assign html to the variable like so:

  const [html, setHtml] = useState(<b>Hey</b>);

Answer 3

It's a string and not HTML, to fix that maybe you can insert it in the div as innerHTML ie.

document.querySelector(".divClassName").innerHTML = html