如何將jsx代碼放到自定義的dom中？- ReactDOM.render - React

PumpkinDylan 發布于2019-08-23 12:50 / 2513人閱讀

摘要：如何將代碼放到自定義的中真實經歷最近開發項目的時候，需要實現圖片的預覽并下載，想著也不難，自己寫一個預覽效果吧。

如何將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自定義表單代碼網絡安全中的防火墻是如何定義的

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99033.html

如何將jsx代碼放到自定義的dom中？- ReactDOM.render - React

摘要：如何將代碼放到自定義的中真實經歷最近開發項目的時候，需要實現圖片的預覽并下載，想著也不難，自己寫一個預覽效果吧。如何將jsx代碼放到自定義的dom中？ - Eric 真實經歷最近開發項目的時候，需要實現圖片的預覽并下載，想著也不難，自己寫一個預覽效果吧。其實預覽就是一個彈窗(Modal)，實現彈窗有兩種方案：1、使用es6的寫法，直接將彈窗和按鈕放在一起，代碼大概如下： /* I...

joywek 2019-08-02 11:55 評論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