Trong ReactJs ngoài state ra còn 1 hình thức lưu giữ data nữa đó là props, vậy props khác state như thế nào? Hiểu đơn giản là state thuộc về component, bạn có thể update, chỉnh sửa state, còn props cũng lưu dữ liệu như state nhưng được nhận từ component cha truyền xuống, bạn không thể chỉnh sửa trực tiếp props mà phải thay đổi từ cha nó. Bạn xem ví dụ sau để hiểu rõ hơn:
Trang 1Bài 5: ReactJS - Props Overview
Trong ReactJs ngoài state ra còn 1 hình thức lưu giữ data nữa đó là props, vậy props khác state như thế nào? Hiểu đơn giản là state thuộc về component, bạn có thể update, chỉnh sửa state, còn props cũng lưu dữ liệu như state nhưng được nhận từ component cha truyền xuống, bạn không thể chỉnh sửa trực tiếp props mà phải thay đổi từ cha nó Bạn xem ví dụ sau để hiểu rõ hơn:
App.js
import React from 'react' ;
class App extends React Component {
render () {
return (
<div>
<h1> { this props headerProp }</ h1 >
<h2> { this props contentProp }</ h2 >
</ div >
);
}
}
export default App ;
Index.js
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App.jsx' ;
Trang 2ReactDOM render (< App headerProp = "Header from props " contentProp = "Content
from props " />, document getElementById ( 'app' ));
export default App ;
Nếu bạn so sánh App.js với bài 4, bạn sẽ thấy giờ đây App không còn state để giữ data
để truyền vào 2 thẻ h1,h2 nữa mà thay vào đó lấy từ props
Kết quả hiển thị vẫn giống bài 4:
Default Props
Bạn có thể set default props cho component thay vì phải truyền vào
lúc reactDom.render()
App.js
import React from 'react' ;
class App extends React Component {
render () {
return (
<div>
<h1> { this props headerProp }</ h1 >
<h2> { this props contentProp }</ h2 >
</ div >
Trang 3);
}
}
App defaultProps = {
headerProp : "Header from props " ,
contentProp : "Content from props "
}
export default App ;
Index.js
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App.jsx' ;
ReactDOM render (< App />, document getElementById ( 'app' ));
State and Props
Ví dụ dưới đây sẽ hướng dẫn bạn cách sử dụng state và props cùng với nhau Chúng
ta sẽ khởi tạo state trong component cha và chuyền nó xuống các components con thông qua props
App.js
Trang 4import React from 'react' ;
class App extends React Component {
constructor ( props ) {
super ( props );
this state = {
header : "Header from props " ,
content : "Content from props "
}
}
render () {
return (
<div>
< Header headerProp = { this state header }/>
< Content contentProp = { this state content }/>
</ div >
);
}
}
class Header extends React Component {
render () {
return (
<div>
<h1> { this props headerProp }</ h1 >
</ div >
);
}
Trang 5class Content extends React Component {
render () {
return (
<div>
<h2> { this props contentProp }</ h2 >
</ div >
);
}
}
export default App ;
Index.js
import React from 'react' ;
import ReactDOM from 'react-dom' ;
import App from './App.jsx' ;
ReactDOM render (< App />, document getElementById ( 'app' ));
Và kết quả vẫn không đổi:
Mình kết thúc bài 5 ở đây nha, các bạn xem lại rồi thực hành nhiều lần để hiểu hơn nha