如何将jsx代码放到自定义的dom中？- ReactDOM.render - React

2024年1月26日 83次阅读 来源: Eric

如何将jsx代码放到自定义的dom中？ – Eric

真实经历

最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。其实预览就是一个弹窗(Modal)，实现弹窗有两种方案：
1、使用es6的写法，直接将弹窗和按钮放在一起，代码大概如下：

/* Img */
class RenderImg extends Component {
  state = {
    showModal: false,
  };

  // 打开预览
  openModal = ()=>{
    this.setState({ showModal: true });
  }

  // 关闭预览
  closeModal = ()=>{
    this.setState({ showModal: false });
  }

  render(){
    let {showModal} = this.state;
    let {text, url} = this.props;
    return (
      <Fragment>
        <a href="javascript:;" onClick={this.openModal}>{text}</a>
        {
          showModal &&

            <div className="modal-preview preview-image">
              {/*somecode....*/}
            </div>
        }
      </Fragment>
    );
  }
}

这样做的缺点是弹窗代码很多，直接和按钮放一起，不太好。

2、通过js创建dom，然后放到body的最下面，很多组件都是这么写的，代码大概如下：

/* 图片类型 */
class RenderImage extends Component {

  //弹窗
  _modal = null;

  // 打开预览
  openModal = ()=>{
    this._modal = this.createModal();
    this._modal.show();
  }

  // 关闭预览
  closeModal = ()=>{
    this._modal.hidden();
  }

  // 下载
  download = ()=>{
    downloadFile(this.props.url)
  }

  //创建Modal
  createModal = ()=>{
    let _this = this;
    return {
      _elem: null,
      //显示
      show: function(){
        //此处是重点
      },
      //关闭
      hidden: function(){
        this._elem && this._elem.remove();
      }
    };
  }

  //创建元素
  createElem = ()=>{
    let {text, url} = this.props;
    return (
      <div className="modal-preview preview-image">
        {/*somecode...*/}
      </div>
    );
  }
  
  render(){
    let {text, url} = this.props;
    return <a href="javascript:;" onClick={this.openModal}>{text}</a>;
  }
}

因为弹窗的内容比较多，所以创建弹窗代码的时候使用了jsx，我们知道jsx代码不能直接通过appendChild放到创建的dom元素中，突然灵光一闪，想到了好久不用的React基础写法ReactDOM.render(template, dom).

正片环节(ReactDOM.render)

如果我们想在html文件中直接使用react，那我们就要用到ReactDOM.render，作用就是将jsx代码转化为HTML代码，并插入指定的dom节点中，来一段简单的代码：

<html>
  <head>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react.min.js"></script>
    <script src="http://static.runoob.com/assets/react/react-0.14.7/build/react-dom.min.js"></script>
    <script src="http://static.runoob.com/assets/react/browser.min.js"></script>
  </head>
  <body>
     <div id="app"></div>

     <script type="text/babel">
        let userName = "Eric";
        ReactDOM.render(
          <div>谢谢观看{userName}的文章，喜欢就点赞转发吧!</div>,
          document.getElementById("app")
        );
    </script>
  </body>
</html>

总结

如果想把jsx代码转化为html代码，就可以使用ReactDOM.render，那么上面的show方法我们就可以这么写：

show: function(){
    this._elem = document.createElement("div");
    ReactDOM.render(_this.createElem(), this._elem);
    document.body.appendChild( this._elem );
}

思考：图片在自适应大小的情况下，如何做到让图片水平和垂直居中显示？

    原文作者：Eric
    原文地址: https://segmentfault.com/a/1190000016919348
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞