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
Subcomponents
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;
Technology