70、臨時：react之 portal

阿新 • • 發佈：2020-08-20

<html>
  <body>
    <div id="app-root"></div>
    <div id="modal-root"></div>
  </body>
</html>
const appRoot = document.getElementById('app-root');
const modalRoot = document.getElementById('modal-root');
class Modal extends React.Component {
  constructor(props) {
    super(props);
     
this.el = document.createElement('div');
  }
  componentDidMount() {
    modalRoot.appendChild(this.el);
  }
  componentWillUnmount() {
    modalRoot.removeChild(this.el);
  }
  render() {
    return ReactDOM.createPortal(
      this.props.children,
      this.el
    );
  }
}
function Child() {
  return 
 (
    <div className="modal">
      <button>Click</button>
    </div>
  );
}
class Parent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {clicks: 0};
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick() {
    this.setState(state => ({
      clicks: state.clicks  
+ 1
    }));
  }
  render() {
    return (
      <div onClick={this.handleClick}>
        <p>Number of clicks: {this.state.clicks}</p>
        <p>
          Open up the browser DevTools
          to observe that the button
          is not a child of the div
          with the onClick handler.
        </p>
        <Modal>
          <Child/>
        </Modal>
      </div>
    );
  }
}
ReactDOM.render(<Parent />, appRoot);

70、臨時：react之 portal

MSSQL系列（二）：表相關操作、列操作、（唯一、主鍵、預設、檢查、外來鍵、非空）約束、臨時表

1.建立表 --建立學生班級表 create table StuClass ( ClassId int primary key, --班級ID 主鍵約束

JavaSE第08篇：API之String、StringBuilder

目錄第一章：API概述1.1-什麼是API（瞭解）1.2-離線文件下載（瞭解）1.3-文件使用步驟（瞭解）第二章：String類2.1-String類概述（瞭解）2.2-建立字串（記憶）2.3-String類的特點（理解）2.4-字串比較（記憶）2.5-使

函式之JavaScript、Vue 與 React+JSX

技術標籤：# JavaScript# Vue.js# React.js 一、函式之 JavaScript <!DOCTYPE html> <html lang="en">

Task 08 ：完成62、70、78題目並打卡

Task 08: 完成以下三個題目並打卡（1天） 062 不同路徑 070 爬樓梯 078 子集 062 不同路徑

萬代公開《緋紅結系》新角色介紹：實力、魅力爆棚之人

今日（1月27日），萬代公開了超腦力RPG《緋紅結系》登場角色的新情報，此次介紹的角色為實力、魅力爆棚的卡連崔佛斯，與該角色有關的截圖也已經公佈。

mybatis 建立臨時表_Java之MyBatis1：MyBatis入門

技術標籤：mybatis 建立臨時表 MyBatis是什麼 MyBatis是什麼，MyBatis的jar包中有它的官方文件，文件是這麼描述MyBatis的：

Flink實戰（七十七）：flink-sql使用（五）分離的 SQL 查詢、SQL 檢視、臨時表（Temporal Table）

技術標籤：Flink入門宣告：本系列部落格是根據SGG的視訊整理而成，非常適合大家入門學習。

2、React：React的 JSX 語法規則介紹

技術標籤：Reactreactjsjavascript 文章目錄 JSX定義全稱：JavaScript XML類似：React定義的一種類似於XML的JS擴充套件語法：JS+XML本質：是React.createElement(component，props，...children)方法的語

蘋果與美國政府合作推出發明專利：新塗層提高鋰電池電壓、能量密度 - IT之家

2月15日訊息據外媒 Patently Apple 報道，蘋果的一項專利於上週獲得美國專利商標局通過。專利中表示，這項發明獲得了美國政府的支援，是蘋果與美國阿貢國家實驗室為美國能源部研發的。美國政府享有專利中的特定權利。

【IT之家開箱】Redmi K40 Pro 圖賞：幻境之通透、質感之輕盈

2 月 26 日訊息昨日晚間，Redmi釋出了 Redmi K40、Redmi K40 Pro 和 Redmi K40 Pro+ 三款機型，K40 Pro 起售價 2799 元，是目前為止市面上最便宜的驍龍 888 旗艦機型，同時還有 4520mAh 大電池等眾多旗艦特性。

《英雄傳說：黎之軌跡》新圖、Fami通相關版面截圖公佈

今日（3月4日），日本Falcom官方又公開了一張《英雄傳說黎之軌跡》戰鬥新圖，此次展示的是女主角行動時的的畫面細節。此外，Fami通相關版面截圖截圖也已經公佈。

《怪物獵人物語2：毀滅之翼》全新預告 7月9日登陸NS、PC

在今晚進行的卡普空《怪物獵人》直播會上，官方公開了一段《怪物獵人物語2：毀滅之翼》的全新預告，遊戲將7月9日正式登陸Switch和Steam平臺，支援中文，並公開了豪華版特典內容，同時當日將會推出三款amiboo。

《英雄傳說：黎之軌跡》官網更新：展示角色、場景新圖

今日（3月9日），日本Falcom官方對《軌跡》系列最新作《黎之軌跡》官網進行了更新，此次更新展示了四名主要角色的立繪，還追加了不少新圖。

恐怖遊戲《克蘇魯：遠古之書》上架Steam 支援簡中、PC配置公佈

第一人稱恐怖遊戲《克蘇魯：遠古之書（Cthulhu: Books of Ancients）》上架Steam，支援簡體中文。玩家在遊戲中扮演一個偵探，尋找失蹤的六個孩子。一個不知名的線人在門口扔了一張神祕的紙條，把他帶到了米斯卡託尼克

卡普空：《生化8》或為最恐怖遊戲、成系列銷量之最

作為卡普空的扛鼎之作，《生化危機》系列一直保持著良好的口碑和銷量，近年來，該系列比以往任何時候都要成功。隨著《生化危機8》即將發售，卡普空希望這一成功能一直延續下去，甚至被超越。

JavaWeb20.4【JQuery基礎：DOM之內容操作、屬性操作】

1 <!DOCTYPE html> 2 <html> 3<head> 4<meta charset=\"UTF-8\"> 5<title></title>

Python筆記：pandas之基礎概念與Series、DataFrame的建立

pandas是什麼　　一個使資料清洗和分析工作變得更快更簡單的資料結構和操作工具。

《鬼滅之刃：火之神血風譚》PS4、PS5版普通、豪華版港服現已開放預購

漫改動作格鬥遊戲《鬼滅之刃：火神血風譚》今日（7月10日）已在PS港服商店開啟預售，一次性購買可同時獲得PS4、PS5版遊戲。

第九篇：DRF之分頁器、ip頻率限制、自動生成介面文件

第九篇：DRF之分頁器、ip頻率限制、生成介面文件目錄第九篇：DRF之分頁器、ip頻率限制、生成介面文件一、分頁器1、PageNumberPagination2、LimitOffsetPagination3、CursorPagination4、如何使用APIView實現分頁？

70、臨時：react之 portal

相關推薦