React基礎知識(5) React Props

2021-09-13 18:25:32 字數 1197 閱讀 3917

state 和 props 主要的區別在於 props 是不可變的,而 state 可以根據與使用者互動來改變。這就是為什麼有些容器元件需要定義 state 來更新和修改資料。 而子元件只能通過 props 來傳遞資料。

一、使用 props

以下例項演示了如何在元件中使用 props:

import react from 'react';

function hellomessage(props)

export default class home extends react.component ;

}render()

}

例項中 name 屬性通過 props.name 來獲取

二、預設 props

import react from 'react';

export default class hellomessage extends react.component

}hellomessage.defaultprops = ;

import react from 'react';

import hellomessage from './lib';

export default class home extends react.component ;

}render()

}

import react from 'react';

export default class name extends react.component

}

import react from 'react';

export default class link extends react.component );}

}

import react from 'react';

import name from './name';

import link from './link';

export default class home extends react.component ;

}render()

}

react基礎知識2

在react的事件處理程式中,內部的this是指向undefined 解決方案1 通過this.clickfn.bind this 解決方案2 屬性初始化器語法,提供了乙個箭頭函式 解決方案3 在函式外麵包一層箭頭函式 onclick onclick class event extends reac...

React 基礎知識介紹

react 基礎知識介紹 另外,本教程的 將全部使用 es6 語法,教程中我會介紹一些用到的 es6 語法,但是不會從頭講解了,推薦閱讀es6入門 hello world 以下是乙個最簡單的demo,將乙個最簡單的元件渲染到頁面上。import react from react import fro...

react 學習基礎知識

三種改變this指向的方法 1.在呼叫的時候使用bind方法 onclick 2.在constructor裡面改變this指向 this.getdata this.getdata.bind this 3.在方法上使用箭頭函式 getdata 兩種雙向繫結的方法 1.根據當前的元素自身的value值 ...