本文共 1149 字，大约阅读时间需要 3 分钟。

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

类似于vue，react也有特殊的标签属性，用来代替v-html

方法一：dangerouslySetInnerHTML

import React from 'react';export default class dangderouslySet extends React.Component {     constructor() {       super()    this.state = {         Html1: '
   
    这是直接嵌套的html代码
   
'    }  }  render() {       return (      
   
    )  }}

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

子组件

import React from 'react';import './resume-card.less';type ResumeCardParams = {     title: string;  styles: {   };};const ResumeCard: React.FC
   
     = (props) => {     const {    title, styles } = props;  return (    
    
      
     
        
              
                {   title}              
     
	//props.children 就是父组件传递过来的dom节点,这样间接实现了html代码的嵌套      {   props.children ? 
     
      {   props.children}
     
 : null}    
    
  );};export default ResumeCard;
   

父组件

import React, {    useEffect, useState } from 'react';import ResumeCard from './components/resume-card';const Parent:React.FC = () => {   return <>	      
   
    	      	//想要嵌套的html代码           
    
     dx 18
    
          
   	}export default Parent;