react（63）——通过标签的dangerouslySetInnerHTML属性，将字符串标签变为react标签

1.这是一个字符串标签

const htmldiv = "<div><h1>这是h1</h1><h2>这是h2</h2><h3>这是h3</h3><div>"

2.将其通过标签的dangerouslySetInnerHTML属性，将其变成react组件

<div dangerouslySetInnerHTML={{ __html: htmldiv }} />

3.运行效果

import React, { Component, lazy, Suspense } from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import Div1 from "./components/div1"

export default class App extends Component {
  render() {
    const htmldiv = "<div><h1>这是h1</h1><h2>这是h2</h2><h3>这是h3</h3><div>"
    return (
      <div dangerouslySetInnerHTML={{__html:htmldiv}}>
      </div>
    );
  }
}

4.注意，当div中有子标签的时候，该属性失效。

children属性就是子标签
children属性（子标签）和dangerouslySetInnerHTML属性只能有一个

import React, { Component, lazy, Suspense } from "react";
import { BrowserRouter, Route, NavLink } from "react-router-dom";
import Div1 from "./components/div1"

export default class App extends Component {
  render() {
    const htmldiv = "<div><h1>这是h1</h1><h2>这是h2</h2><h3>这是h3</h3><div>"
    return (
      <div dangerouslySetInnerHTML={{__html:htmldiv}}>
        123
      </div>
    );
  }
}