成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

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

joywek / 3620人閱讀

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

如何將jsx代碼放到自定義的dom中？ - Eric

真實經(jīng)歷

最近開發(fā)項目的時候，需要實現(xiàn)圖片的預(yù)覽并下載，想著也不難，自己寫一個預(yù)覽效果吧。其實預(yù)覽就是一個彈窗(Modal)，實現(xiàn)彈窗有兩種方案：
1、使用es6的寫法，直接將彈窗和按鈕放在一起，代碼大概如下：

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

  // 打開預(yù)覽
  openModal = ()=>{
    this.setState({ showModal: true });
  }

  // 關(guān)閉預(yù)覽
  closeModal = ()=>{
    this.setState({ showModal: false });
  }

  render(){
    let {showModal} = this.state;
    let {text, url} = this.props;
    return (
      
        {text}
        {
          showModal &&

            

              {/*somecode....*/}
            

        }
      
    );
  }
}

這樣做的缺點是彈窗代碼很多，直接和按鈕放一起，不太好。

2、通過js創(chuàng)建dom，然后放到body的最下面，很多組件都是這么寫的，代碼大概如下：

/* 圖片類型 */
class RenderImage extends Component {

  //彈窗
  _modal = null;

  // 打開預(yù)覽
  openModal = ()=>{
    this._modal = this.createModal();
    this._modal.show();
  }

  // 關(guān)閉預(yù)覽
  closeModal = ()=>{
    this._modal.hidden();
  }

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

  //創(chuàng)建Modal
  createModal = ()=>{
    let _this = this;
    return {
      _elem: null,
      //顯示
      show: function(){
        //此處是重點
      },
      //關(guān)閉
      hidden: function(){
        this._elem && this._elem.remove();
      }
    };
  }

  //創(chuàng)建元素
  createElem = ()=>{
    let {text, url} = this.props;
    return (
      

        {/*somecode...*/}
      

    );
  }
  
  render(){
    let {text, url} = this.props;
    return {text};
  }
}

因為彈窗的內(nèi)容比較多，所以創(chuàng)建彈窗代碼的時候使用了jsx，我們知道jsx代碼不能直接通過appendChild放到創(chuàng)建的dom元素中，突然靈光一閃，想到了好久不用的React基礎(chǔ)寫法ReactDOM.render(template, dom).

正片環(huán)節(jié)(ReactDOM.render)

如果我們想在html文件中直接使用react，那我們就要用到ReactDOM.render，作用就是將jsx代碼轉(zhuǎn)化為HTML代碼，并插入指定的dom節(jié)點中，來一段簡單的代碼：

總結(jié)

如果想把jsx代碼轉(zhuǎn)化為html代碼，就可以使用ReactDOM.render，那么上面的show方法我們就可以這么寫：

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

思考：圖片在自適應(yīng)大小的情況下，如何做到讓圖片水平和垂直居中顯示？

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53211.html

相關(guān)文章

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

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

    PumpkinDylan 評論0 收藏0

  • React

    摘要：基礎(chǔ)創(chuàng)建虛擬參數(shù)元素名稱，例如參數(shù)屬性集合，例如，，，從參數(shù)開始，表示該元素的子元素，通常這些元素通過創(chuàng)建，文本文件可以直接插入嘻嘻哈哈這是渲染器，將元素渲染到頁面中。 React簡介 FeceBook開源的一套框架，專注于MVC的視圖V模塊。實質(zhì)是對V視圖的一種實現(xiàn)。 React框架的設(shè)計沒有過分依賴于某個環(huán)境，它自建一套環(huán)境，就是virtual DOM（虛擬DOM）。 提供基礎(chǔ)AP...

    hlcc 評論0 收藏0

  • 從零開始實現(xiàn)一個React（一）：JSX和虛擬DOM

    摘要：前言是前端最受歡迎的框架之一，解讀其源碼的文章非常多，但是我想從另一個角度去解讀從零開始實現(xiàn)一個，從層面實現(xiàn)的大部分功能，在這個過程中去探索為什么有虛擬為什么這樣設(shè)計等問題。 前言 React是前端最受歡迎的框架之一，解讀其源碼的文章非常多，但是我想從另一個角度去解讀React：從零開始實現(xiàn)一個React，從API層面實現(xiàn)React的大部分功能，在這個過程中去探索為什么有虛擬DOM、d...

    曹金海 評論0 收藏0

  • React初探

    摘要：綁定事件后的返回值。設(shè)置屬性，將要設(shè)置的新屬性，該狀態(tài)會和當(dāng)前的合并，可選參數(shù)，回調(diào)函數(shù)。方法與類似，但它會刪除原有強制更新參數(shù)說明，可選參數(shù)，回調(diào)函數(shù)。判斷組件掛載狀態(tài)返回值或，表示組件是否已掛載到中方法用于判斷組件是否已掛載到中。 React 特點 聲明式設(shè)計 ?React采用聲明范式，可以輕松描述應(yīng)用。 高效 ?React通過對DOM的模擬，最大限度地減少與DOM的交互。 靈活...

    張金寶 評論0 收藏0

  • 掌握react，這一篇就夠了

    摘要：小明小明兒子，可以看到組件顯示了父組件的。小明受控組件和非受控組件受控組件和非受控組件這些都是指的表單組件，當(dāng)一個表單的值是通過改變的而不是通過是受控組件，否則就是非受控組件。 react眾所周知的前端3大主流框架之一，由于出色的性能，完善的周邊設(shè)施風(fēng)頭一時無兩。本文就帶大家一起掌握react。 jsx語法 前端MVVM主流框架都有一套自己的模板處理方法，react則使用它獨特的jsx...

    Enlightenment 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<