stay vue in , We often use it on labels v-html come , Will be ready-made html The code is embedded in the bound tag ,react How to operate ?

be similar to vue,react There are also special tag properties , To replace v-html
dangerouslySetInnerHTML attribute , The property is assigned a value , Accept only objects .

Method 1 :dangerouslySetInnerHTML
import React from 'react'; export default class dangderouslySet extends React.
Component{ constructor() { super() this.state = { Html1: '<div
className="dx"> This is directly nested html code </div>' } } render() { return ( <div
dangerouslySetInnerHTML={{__html:this.state.Html1}}></div> ) } }
Method 2 : Through parent-child component 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 It is passed by the parent component dom node , This is achieved indirectly html Code nesting {props.
children? <div style={{ marginTop: '20px' }}>{props.children}</div> : null} </
div> ); }; export default ResumeCard;
Parent component
import React, { useEffect, useState } from 'react'; import ResumeCard from
'./components/resume-card'; const Parent:React.FC = () => { return <> <
ResumeCard title=" Personal advantage "> // What do you want to nest html code <div>dx 18</div> </ResumeCard> </> }
exportdefault Parent;

©2020 ioDraw All rights reserved
【webpack】DLL plugin Principle analysis Combined with source code Transformer The most comprehensive , The deepest analysis filemanager-webpack-plugin Turn resources into zip Package and archive JavaScript study ( Function declaration and parameters ) mean value - Implementation and application of variance model _python_ Data analysis _9JAVA Snake games ( Source code + notes )SpringBoot integrate Redisson Implement delay queue python code , Easy to complete Snake games Thread.setDaemon Set up the Daemons Unity Code dynamic creation of preform in editor expansion function