React 基本語法

2021-09-17 20:56:16 字數 2363 閱讀 2711

目錄

一、元件的使用

1.1 宣告元件

1.2 掛載元件

二、在元件裡宣告資料及繫結資料

三、在元件中繫結屬性

四、引入

有倆種寫法

寫法一：在components元件中新建home. js 檔案

import react, from "react";


//宣告元件的類


class home extends component


}export default home;
寫法二：在components元件中新建cart. js 檔案

import react from "react";


class cart extends react.component 


}export default cart;
先導入元件，在使用元件（與vue的區別就是，不用註冊元件）

//引入react物件，import後邊的宣告：react是整個react物件（當前物件的屬性）


import react,  from 'react';


//引入當前元件的的css指令碼


//匯入其他元件  (宣告 匯入 使用)


import home from "./home.js"


import cart from "./cart.js"


//es6中的類繼承寫法


//class宣告類   extends繼承


//render方法值渲染模板介面    有返回值且返回的是乙個物件， render  裡面的元素只能有乙個根節點


render() 


}
繫結普通資料，資料，資料元素集合，資料遍歷使用map方法，{}繫結資料

注意： 遍歷陣列 不能使用foreach，因為它沒有返回物件不能渲染到介面上，用map對映 

import react,  from "react";


//宣告元件的類


class home extends component ,,]


}}


render()  


遍歷陣列


繫結陣列 + 元素集合 )}


}export default home;
知識補充：這是es6對類的預設方法，通過 new 命令生成物件例項時自動呼叫該方法。並且該方法是類中必須有的，如果沒有顯示定義，則會預設新增空的constructor( )方法。

在class方法中，繼承是使用 extends 關鍵字來實現的。子類必須 在 constructor( )呼叫 super( )方法，否則新建例項時會報錯。

報錯的原因是：子類是沒有自己的 this 物件的，它只能繼承自父類的 this 物件，然後對其進行加工，而super( )就是將父類中的this物件繼承給子類的。沒有 super，子類就得不到 this 物件。

繫結元素屬性，元素類名稱，元素行內樣式

import react,  from "react";


//宣告元件的類


class home extends component }}


render()  


繫結元素的屬性


繫結元素類名稱


文字框}


值可以做成拼接值


*/})


}}export default home;
通過getattribute獲取自定義屬性 

import react, from "react"


class event extends component ;


}//設定自定義屬性


//捕獲當前事件作用的物件   ie:event.srcelement    firefox:event.target


databtn=(e)=>


render() 


設定自定義屬性);}


}export default event;
引入的倆種方式，遠端，本地（包括import匯入和require請求倆種）

import react from "react";


//匯入本地

				
React 基本語法
一 宣告元件 1.建立元件檔案 兩種寫法 在components資料夾中新建乙個home.js檔案 import react,from react 宣告元件的類 class home extends component export default home 在components資料夾中新建乙個c...

				
React基本語法知識
1.angular react vue區別 1.angular1.x mvc 2.x mvvm 都給你限制了 http ajax 2.vue2mvvm框架 不限制 推薦vue resource 3.react更專注於view層 react 優勢 1.虛擬dom 2.效能性很高 3.解決一些終端的問題...

				
React基本語法，注釋 插值
render接收兩個引數，乙個jsx語法的節點模板，乙個是渲染到那個元素物件上 會成為其子節點 text babel const element hello react h1 reactdom.render element,document.queryselector script text bab...