在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;
更多推荐
react 如何直接嵌套html代码
发布评论