react之兩種定義元件的方式，通過方法定義和通過類繼承React.Component來定義

阿新 • • 發佈：2020-12-15

技術標籤：# react 需理解 react js javascript html5

程式碼

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03_component_basic</title>
    <script src="../js/react.development.js"></script>
    <script src=" 
../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
</head>
<body>
<div id="example1"></div>
<div id="example2"></div>

<script type="text/babel">
    //1.定義元件
    /*方式1：工廠函式元件（簡單元件）*/ 

    function MyComponent(){
        return <h2>工廠函式元件（簡單元件)</h2>
    }
    /*方式2：ES6類元件（複雜元件）*/
    class MyComponent2 extends React.Component{
        render(){
            return <h2>ES6類元件（複雜元件）</h2>
        }
    }

    //2.渲染元件標籤
    ReactDOM.render(<MyComponent/>,document. 
getElementById('example1'))
    ReactDOM.render(<MyComponent2/>,document.getElementById('example2'))
</script>
</body>
</html>

執行結果：
在這裡插入圖片描述

定義元件需要注意的點

元件名稱首字母要大寫
渲染元件的時候，是用<元件名字 />
component是元件，成分的意思

react之兩種定義元件的方式，通過方法定義和通過類繼承React.Component來定義

技術標籤：# react需理解reactjsjavascripthtml5 程式碼 <!DOCTYPE html> <html lang="en">

react之四種元件中DOM樣式設定方式

1、行內樣式想給虛擬dom新增行內樣式，需要使用表示式傳入樣式物件的方式來實現

詳解Spring基於xml的兩種依賴注入方式

1）使用構造器注入bean 實體類：使用者類 public class User { private String name; private UserMessage userMessage;

keras 兩種訓練模型方式詳解fit和fit_generator(節省記憶體)

第一種，fit import keras from keras.models import Sequential from keras.layers import Dense import numpy as np

一口氣說出 OAuth2.0 的四種鑑權方式，面試官會高看一眼

本文收錄在個人部落格：www.chengxy-nds.top，技術資源共享，一起進步上週我的自研開源專案開始破土動工了，《開源專案邁出第一步，10 選 1？頁面模板成了第一個絆腳石

05.Python網路爬蟲之三種資料解析方式

05.Python網路爬蟲之三種資料解析方式引入回顧requests實現資料爬取的流程指定url

資料分析之兩種使用者分群方法（RFM和聚類）

本文由於沒有現成的資料，就自己生成了一些商品訂單資料，基於該資料進行了RFM和聚類的構建

NIO的兩種基本實現方式

1. 利用通道完成檔案的複製(非直接緩衝區) @Test public void test1(){ FileInputStream fis = null;

JAVA高併發之執行緒的實現方式，含Lamabda表示式

Java中執行緒實現的方式在 Java 中實現多執行緒有4種手段： 1.繼承 Thread 類 2.實現 Runnable 介面

兩種資料消費方式：pull與push

pull和push，是在軟體中消費資料的兩種方式，它們描述了資料生產者（或持有者）與資料消費者之間是如何通訊的。過去我們肯定了解過它們，不過可能會在程式設計中會忽略它們之間的區別與聯絡，本篇文章希望幫助大家理

redis的兩種持久化的機制，你真的瞭解麼？

redis提供了兩種持久化的機制RDB和AOF機制 RDB(redis Database):RDB儲存某一個時間點之前的快照資料。

Spring 的兩種依賴注入方式

Spring 的兩種依賴注入方式： setter()方法注入，構造器注入測試demo 1）建立一個User類

java之兩種列舉寫法

最近回顧了一下java中關於列舉的部分，從開始的抗拒到現在的有點香，這種變化還是很值得高興的。

Oracle兩種資料庫連線方式

技術標籤：其他資料庫 Oracle兩種資料庫連線方式第一種：直接使用者名稱密碼例項連線

Springboot呼叫wsdl的webservice介面兩種不常用方式

import javax.xml.namespace.QName; import javax.xml.rpc.ParameterMode; import org.apache.axis.client.Call;

結構體變數的兩種初始化方式

技術標籤：c語言學習筆記c語言結構體變數的初始化定義時初始化定義之後初始化

QT實現滾動輪播顯示圖片（支援兩種滾動模式切換，間隔時間設定，按鈕尺寸設定，縮放比自適應）

廢話不多說，直接上程式碼和效果圖兩種切換效果 #include <QWidget> #include <QButtonGroup>

倍思推出 PD-DC 充電線：兩種介面可選，舊筆記本也可用 PD 充電

2月3日訊息據充電頭網訊息，倍思近日釋出了一款 PD to DC 轉接線，可以讓圓形、方形 DC 口的舊款膝上型電腦享受 PD 充電。目前的大多數輕薄本都支援 PD 協議 20V 電源輸入，可以享用小體積氮化鎵充電頭，十分便攜。但

JPA 實現兩種引數注入方式（?和:xxx）

技術標籤：JPA public void setParameter(Object params,int paramType,Query query){ if (paramType == 1) {//?引數注入

博世宣佈與微軟攜手開發軟體定義汽車平臺，以實現車輛和雲端無縫對接 - IT之家

2 月 20 日訊息，博世宣佈和微軟攜手開發軟體平臺，實現車輛與雲端之間的無縫對接。