React 元件的三大屬性之props

props的理解：

① 每個元件物件都會有props（properties的簡寫）屬性；

② 元件標籤的所有屬性都儲存在props中。

props的作用：

① 通過標籤屬性從元件外向元件內傳遞變化的資料；

注意點：元件內部不要修改props資料。

import react from 'react';

// 1. 建立元件
function fun(props) 
export default fun;

import react from 'react';

import reactdom from 'react-dom';
import './index.css';
import fun from "./components/main";
const person = 
// 2. 渲染元件標籤（注意：一定要把定義的常量屬性值傳給元件）
reactdom.render(,
document.getelementbyid('root')
);

// 2. 渲染元件標籤

reactdom.render(,

document.getelementbyid('root')

);效果圖：

1. state：元件自身內部可變化的資料。

2. props：從元件外部傳入到元件內部的資料。（寫元件標籤時傳入）

list.proptypes =

如果其中的age屬性型別被限制為number型別，在定義常量時寫成了age:「18」，此時，在頁面上顯示是沒有問題的，但是按f12看一下控制台的時候，是會報錯的。

如下圖：

list.defaultprops =

如：

const person2 =

React的元件三大屬性之state

學習過程中編寫的 和筆記 import react from react class like extends react.component 將新增方法中的this 強制繫結為元件物件 難點 this.handleclick this.handleclick.bind this 新新增的方法 內部...

React 元件的三大屬性之refs

獲取input輸入框中的值 分為兩種情況 1.僅獲取input輸入框的值，該input不存在事件發生 handleclick 2.獲取存在事件發生的input元素的值 利用形參event handleblur event 所有 import react from react class add ex...

07 React 元件三大屬性 refs

需求 自定義元件,功能說明如下 1.介面如頁面所示 2.點選按鈕,提示第乙個輸入框中的值 3.當第2個輸入框失去焦點時,提示這個輸入框中的值 第一步，初始化靜態元件，並渲染元件標籤 第二步，做互動，點選按鈕彈出輸入框中的值，以及失去焦點是彈出輸入框中的值 前者操作的dom元素和觸發事件的元素不是同乙...