html modal显示页面,Modal中显示HTML字符串

最近在做的工具有个需求，因为有些变量的设置，真的很多人填错，想要给变量加个图文并茂的说明(好吧，我们的工具变量功能确实是有些复杂)。

好了，需求说完，说做就做。

先加个Modal

这里还好说，我们的界面是用react做的，就用antd的modal加进来就好。

​

import React from 'react';

import { Modal, Button } from 'antd';

class Option extends React.Component {

state = { visible: false }

showModal = () => {

this.setState({

visible: true,

});

}

handleOk = (e) => {

console.log(e);

this.setState({

visible: false,

});

}

handleCancel = (e) => {

console.log(e);

this.setState({

visible: false,

});

}

render() {

return (

Open Modal

title="Basic Modal"

visible={this.state.visible}

onOk={this.handleOk}

onCancel={this.handleCancel}

>

);

}

}

export default Option

​

点击按钮，显示正常

Modal里面显示HTML字符串

下一步，在modal中试着加个html字符串

const modalContent = `

辽宁男篮夺冠，辽宁男篮在2018CBA决赛当中以总比分4比0的比分战胜了浙江广厦队，队史首次拿到了CBA的总冠军头衔。北京时间4月22日晚间，新赛季CBA总决赛第四场在辽宁队主场开启，主场辽宁拿下对手登顶。

title="Basic Modal"

visible={this.state.visible}

onOk={this.handleOk}

onCancel={this.handleCancel}

width="800"

>

Please try again

{document.getElementById("modalHTMLTest")?

document.getElementById("modalHTMLTest").innerHTML=modalContent

:null}

这样，图文并茂的modal就出现了。

这bug怎么办？

但是，代码写到这，有个bug，我也不知道该怎么处理，就是第一次打开这个网页的时候，第一次打开modal，因为modal里面的div元素还没有建立，这时候document.getElementById("modalHTMLTest")的结果会是null。

因为我们的工具没有外部用户，所以暂时这样也还行，但是真的是这里求解决方案，有知道的小伙伴麻烦请告知。

那么HTML字符串哪里来？

其实在做这个的时候也有考虑用.md文件来写，但是我真的是不知道js文件中怎么引用写好的.md文件(其实本质是不知道前端代码中怎么能用fs吧)，只好作罢，甚至也尝试使用了md转html字符串的一些库。

但是对于不太会写md的我，觉得html编辑器也好吧 ，暂时能够解决问题。

在这里也求更好的解决方案啦。

作为前端小白，叩谢~