在vue中，我们常常在标签上使用v-html来，将现成的html代码嵌入到被绑定的标签中，react如何操作呢？

类似于vue，react也有特殊的标签属性，用来代替v-html
dangerouslySetInnerHTML属性，该属性被赋值，只接受对象。

方法一：dangerouslySetInnerHTML

import React from 'react';

export default class dangderouslySet extends React.Component {
  constructor() {
    super()
    this.state = {
      Html1: '<div className="dx">这是直接嵌套的html代码</div>'
    }
  }
  render() {
    return (
      <div dangerouslySetInnerHTML={{__html:this.state.Html1}}></div>
    )
  }
}

方法二：通过父子组件 this.props.children

子组件

import React from 'react';

import './resume-card.less';

type ResumeCardParams = {
  title: string;
  styles: {};
};

const ResumeCard: React.FC<ResumeCardParams> = (props) => {
  const { title, styles } = props;

  return (
    <div className="resume-card-warpper">
      <div className="resume-card-logo-title">
        <span className="resume-card-logo" />
        <span className="resume-card-title" style={styles}>
          {title}
        </span>
      </div>
	//props.children 就是父组件传递过来的dom节点,这样间接实现了html代码的嵌套
      {props.children ? <div style={{ marginTop: '20px' }}>{props.children}</div> : null}
    </div>
  );
};

export default ResumeCard;

父组件

import React, { useEffect, useState } from 'react';
import ResumeCard from './components/resume-card';

const Parent:React.FC = () => {
return <>
	      <ResumeCard title="个人优势">
	      	//想要嵌套的html代码
           <div>dx 18</div>
          </ResumeCard>
	</>
}
export default Parent;