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

joywek 发布于2019-08-02 11:55 / 3514人阅读

摘要：如何将代码放到自定义的中真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。

如何将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 (
      
        {text}
        {
          showModal &&

            
              {/*somecode....*/}
            
        }
      
    );
  }
}

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

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 (
      
        {/*somecode...*/}
      
    );
  }
  
  render(){
    let {text, url} = this.props;
    return {text};
  }
}

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

正片环节(ReactDOM.render)

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

总结

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

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

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

GPU云服务器云服务器 dom自定义属性自定义ubb代码 php自定义表单代码网络安全中的防火墙是如何定义的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/53211.html

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

摘要：如何将代码放到自定义的中真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。如何将jsx代码放到自定义的dom中？ - Eric 真实经历最近开发项目的时候，需要实现图片的预览并下载，想着也不难，自己写一个预览效果吧。其实预览就是一个弹窗(Modal)，实现弹窗有两种方案：1、使用es6的写法，直接将弹窗和按钮放在一起，代码大概如下： /* I...

PumpkinDylan 2019-08-23 12:50 评论0 收藏0
React

摘要：基础创建虚拟参数元素名称，例如参数属性集合，例如，，，从参数开始，表示该元素的子元素，通常这些元素通过创建，文本文件可以直接插入嘻嘻哈哈这是渲染器，将元素渲染到页面中。 React简介 FeceBook开源的一套框架，专注于MVC的视图V模块。实质是对V视图的一种实现。 React框架的设计没有过分依赖于某个环境，它自建一套环境，就是virtual DOM（虚拟DOM）。提供基础AP...

hlcc 2019-08-22 10:35 评论0 收藏0
从零开始实现一个React（一）：JSX和虚拟DOM

摘要：前言是前端最受欢迎的框架之一，解读其源码的文章非常多，但是我想从另一个角度去解读从零开始实现一个，从层面实现的大部分功能，在这个过程中去探索为什么有虚拟为什么这样设计等问题。前言 React是前端最受欢迎的框架之一，解读其源码的文章非常多，但是我想从另一个角度去解读React：从零开始实现一个React，从API层面实现React的大部分功能，在这个过程中去探索为什么有虚拟DOM、d...

曹金海 2019-08-22 15:32 评论0 收藏0
React初探

摘要：绑定事件后的返回值。设置属性，将要设置的新属性，该状态会和当前的合并，可选参数，回调函数。方法与类似，但它会删除原有强制更新参数说明，可选参数，回调函数。判断组件挂载状态返回值或，表示组件是否已挂载到中方法用于判断组件是否已挂载到中。 React 特点声明式设计 −React采用声明范式，可以轻松描述应用。高效 −React通过对DOM的模拟，最大限度地减少与DOM的交互。灵活...

张金宝 2019-08-20 14:45 评论0 收藏0
掌握react，这一篇就够了

摘要：小明小明儿子，可以看到组件显示了父组件的。小明受控组件和非受控组件受控组件和非受控组件这些都是指的表单组件，当一个表单的值是通过改变的而不是通过是受控组件，否则就是非受控组件。 react众所周知的前端3大主流框架之一，由于出色的性能，完善的周边设施风头一时无两。本文就带大家一起掌握react。 jsx语法前端MVVM主流框架都有一套自己的模板处理方法，react则使用它独特的jsx...

Enlightenment 2019-08-23 11:45 评论0 收藏0