Modal中显示HTML字符串

2019-04-27 20:47:43 阅读：484 来源： 互联网

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

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

先加个Modal

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

antd关于modal的说明页面https://ant.design/components/modal-cn/


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 (
      <div>
        <Button type="primary" onClick={this.showModal}>
          Open Modal
        </Button>
        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
        >
        </Modal>
      </div>
    );
  }
}
export default Option

点击按钮，显示正常

Modal里面显示HTML字符串

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

const modalContent = `<p style="margin-top: 0px; margin-bottom: 0px; padding: 0px; line-height: 24px; color: rgb(51, 51, 51); text-align: justify; font-family: arial; white-space: normal; background-color: rgb(255, 255, 255);">
    <span class="bjh-p"><span class="bjh-strong" style="font-size: 18px; font-weight: 700;">辽宁男篮夺冠</span>，辽宁男篮在2018CBA决赛当中以总比分4比0的比分战胜了浙江广厦队，队史首次拿到了CBA的总冠军头衔。北京时间4月22日晚间，新赛季CBA总决赛第四场在辽宁队主场开启，主场辽宁拿下对手登顶。</span>
</p>
<p>
    <img class="large" src="http://t11.baidu.com/it/u=1330083070,2886574451&fm=173&app=25&f=JPEG?w=640&h=423&s=3621920902A1C2F00C30578E0300A084"/>
</p>
    <br/>
</p>`

        <Modal
          title="Basic Modal"
          visible={this.state.visible}
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          width="800"
        >
          <div id="modalHTMLTest">Please try again</div>
          <script>
            {document.getElementById("modalHTMLTest")? 
             document.getElementById("modalHTMLTest").innerHTML=modalContent
            :null}
          </script>
        </Modal>

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

这bug怎么办？

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

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

那么HTML字符串哪里来？

嗯，最后再说一个，图文并茂的HTML字符串可以用https://ueditor.baidu.com/website/onlinedemo.html来编辑并得到html源码。

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

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

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

作为前端小白，叩谢~

标签：md,Modal,html,HTML,modal,字符串
来源： https://blog.csdn.net/weixin_40071465/article/details/89606471

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Modal中显示HTML字符串