react的基本操作(1)

来源:https://www.cnblogs.com/mengeer/archive/2018/07/30/9392880.html
-Advertisement-
Play Games

1.react 組件創建 首先要引入以下三個庫: react.min.js - React 的核心庫 react-dom.min.js - 提供與 DOM 相關的功能 babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 R ...


1.react 組件創建

首先要引入以下三個庫:

  • react.min.js - React 的核心庫
  • react-dom.min.js - 提供與 DOM 相關的功能
  • babel.min.js - Babel 可以將 ES6 代碼轉為 ES5 代碼,這樣我們就能在目前不支持 ES6 瀏覽器上執行 React 代碼。Babel 內嵌了對 JSX 的支持。通過將 Babel 和 babel-sublime 包(package)一同使用可以讓源碼的語法渲染上升到一個全新的水平

react組件的創建有三種方式:

(1).

<script type="text/babel"> //類型必須為babel
    var Hello =React.createClass({
        render:function(){
            return <p>hello</p>;
        }
    });
    ReactDOM.render(
        <Hello/>,
        document.getElementById('exp')
    )
</script>

首先創建react 組件類,在通過ReactDOM.render()將其渲染在id為exp的dom中

(2)使用函數定義了一個組件:

function New(props,refs){
                console.log(props,refs)
                return <p>New</p>;
            }
            ReactDOM.render(
                <New class="q"/>,
                document.getElementById('example')
            );

(3)使用 ES6 class 來定義一個組件:

class New extends React.Component {
        render() {
            return (
        <p>New</p> ) } ReactDOM.render( <New/>, document.getElementById('ex') )

2.react State(狀態)

React 把組件看成是一個狀態機(State Machines)。通過與用戶的交互,實現不同狀態,然後渲染 UI,讓用戶界面和數據保持一致。

React 里,只需更新組件的 state,然後根據新的 state 重新渲染用戶界面(不要操作 DOM)。

以下實例創建一個名稱擴展為 React.Component 的 ES6 類,在 render() 方法中使用 this.state 來修改當前的時間。

添加一個類構造函數來初始化狀態 this.state,類組件應始終使用 props 調用基礎構造函數。

class Clock extends React.Component {
  constructor(props) {
    super(props);
    this.state = {date: new Date()};//初始化state
  }
 
  render() {
    return (
      <div>
        <h1>Hello, world!</h1>
        <h2>現在是 {this.state.date.toLocaleTimeString()}.</h2>
      </div>
    );
  }
}
 
ReactDOM.render(
  <Clock />,
  document.getElementById('example')
);

 

3.refs 使用

class New extends React.Component {
        render() {
            return (
                <div ref>//在組件的某個節點標簽上 添加 ref
                         //即可在this.refs中看到該節點下的所有 節點,即數據
                    <p>1</p>
                    <span>2</span>
                </div>
            )
        }
        componentDidMount(){
            console.log(this.refs.true.children[0].innerHTML)//通過refs獲取帶有 ref節點的 第一個子元素的內容
        }
    }
    ReactDOM.render(
        <New/>,
        document.getElementById('ex')
    )

 


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 安裝APK 發送請求獲取輸入流 解析XML文件 可以開始下載 跟蹤下載進度 下載完畢啟動安裝 獲取項目包名 ...
  • 系統路徑 文件操作 資源文件assets和RW res/raw:文件會被映射到R.java文件中,訪問的時候直接通過資源ID訪問,沒有有目錄結構 assets:不會映射到R.java文件中,通過AssetManager來訪問,能有目錄結構 從資源文件中獲取Bitmap ...
  • ios的viewcontroller生命周期是 init -> loadView -> viewDidLoad -> viewWillAppear -> viewDidAppear -> viewWillDisappear -> viewDidAppear -> viewDidUnload -> d ...
  • Preface Android中,Client測量和計算佈局,SurfaceFlienger(server)用來渲染繪製界面,client和server的是通過匿名共用記憶體(SharedClient)通信。 每個應用和SurfaceFlienger之間都會創建一個SharedClient,一個Sha ...
  • 一,效果圖。 二,代碼。 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Todo</title> <meta name="viewport" content="initial-scale=1, maximum-scale=1, ...
  • 本文講述JavaScript中類繼承的實現方式,並比較實現方式的差異。 一、何為繼承 繼承,是子類繼承父類的特征和行為,使得子類對象具有父類的實例域和方法。 繼承是面向對象編程中,不可或缺的一部分。 1.1 優點 父類可以為子類提供通用的屬性,而不必因為增加功能,而逐個修改子類的屬性 同上 子類在父 ...
  • React路由 React推了兩個版本 一個是react-router 一個是react-router-dom 個人建議使用第二個 因為他多了一個Link組件 Npm install react-router-dom 1.引入 上邊兩種方法都行,需要註意的是第二種,下邊的便簽的寫成<HashRout ...
  • 23:01:17 react腳手架搭建 (個人用的是webstorm,所以分享下webstorm中的創建react腳手架項目的方法) 1.創建新項目(前提是下載nodejs環境) 2.下載好在webstorm中右鍵自己創建的項目目錄,菜單中會出現一個命令行工具,點進去 然後 npm start 開啟 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...