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

gjcxywwx 2019-06-28

如何将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 );
}

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

相关推荐