Component trong React hướng dẫn cách tạo component, khai báo và dùng tham số cho component trong React, state của component… Để học bài này, bạn cần học bài cơ bản về React để nắm các kiến thức cơ bản trưiớc.
Component trong React
Component: là một khối code độc lập, có thể tái sử dụng nhiều lần. Nhờ dùng component, bạn có thể chia UI thành nhiều phần nhỏ (mỗi phần là 1 component).

- Các biến (thông tin) trong component được lưu trong 1 đối tượng có tên là state.
- Nếu trong component có hàm constructor() , thì hàm này sẽ tự động chạy khi component khởi tạo .Trong hàm constructor (), bạn cần phải chạy lệnh super() để chạy constructor của React trước .
- Tạo component: Có hai cách tạo là class và function, dùng cách nào tùy nhu cầu.
Function component
Là cách viết component theo kiểu function. Mời xem ví dụ 1: trong file index.js, định nghĩa component hiện ngày hôm nay và đưa kết quả ra div root
const HienNgay = () => {
const d = new Date();
let ngay= d.getDate();
let thang = d.getMonth()+1;
let nam = d.getFullYear();
return "Hôm nay là : " + ngay+"/"+ thang +"/" + nam ;
}
ReactDOM.render(<HienNgay/>, document.getElementById('root'));
Ví dụ 2: Tạo function component để hiện 1 tin trong file riêng Src/Hien1Tin.js
import './Hien1Tin.css';
function Hien1Tin() { //const Hien1Tin = () =>
const t=
<div className="tin">
<h4 className="tieude">
<a href="#"> Tiêu đề tin </a>
Số lần xem <span> 0 </span>
</h4>
<p className="mota">Mô tả tin</p>
</div>;
return t;
}
export default Hien1Tin;
src/Hien1Tin.css
.tin { text-align: justify; line-height: 150%;}
.tin .tieude a { color: orangered; text-decoration: none;}
Nhúng component và đưa kết quả ra div root

Class Component
Để tạo component dạng class, bạn khai báo 1 class và extends React.Component. Trong class phải dùng hàm render xuất dữ liệu , lệnh return() phải có đừng quên nhé. Cú pháp gợi ý như ví dụ dưới.
Tạo file src/HienComment.js
import React from 'react';
class HienComment extends React.Component {
render(){
return (
<div className="comment">
<p> Họ tên </p>
<div> Nội dung comment</div>
</div>
);
}
}
export default HienComment;
Nhúng class component và sử dụng: cũng như function component

Conponent Constructor
Nếu trong component có hàm constructor() thì nó sẽ tự chạy khi gọi component. Do đó trong constructor, bạn có thể code để thực hiện các việc cần thiết khi component khởi chạy. Trong hàm constructor bắt buộc phải có lệnh super() hoặc super(props) để chạy constructor của React trước.
Các biến trong component được lưu 1 đới tượng có tên là state.
Ví dụ:
import React from 'react';
class HienComment extends React.Component {
constructor() {
super();
this.state = {caption:"Ý kiến bạn đọc"}
}
render(){
return (
<div className="comment">
<h4>{this.state.caption}</h4>
<p> Họ tên </p>
<div> Nội dung</div>
</div>
);
}
}
export default HienComment;
Properties của component
Các component thường có nhiều thuộc tính (props), nhờ thế mà việc sử dụng component rất linh động. Truyền thuộc tính cho component thì giống như dùng thuộc tính HTML. Bên trong component, cú pháp nhận các props như sau:

Ví dụ 1:
import './Hien1Tin.css';
function Hien1Tin(props) { //const Hien1Tin = () =>
const t=
<div className="tin">
<h4 className="tieude">
<a href="#"> {props.tieude} </a>
Số lần xem <span> {props.xem} </span>
</h4>
<p className="mota">Mô tả tin</p>
</div>;
return t;
}
export default Hien1Tin;
Truyền tham số cho component
ReactDOM.render(
<Tin tieude="Người suốt đời gặp may" xem="235"/>,
document.getElementById('root')
);
Ví dụ 2: với class components
import React from 'react';
class HienComment extends React.Component {
render(){
return (
<div className="comment">
<p> {this.props.hoten} </p>
<div> {this.props.noidung}</div>
</div>
);
}
}
export default HienComment;
Truyền tham số cho class component cũng như function component
import Tin from './Hien1Tin';
import YKien from './HienComment';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<YKien hoten="Mai Anh Tới" noidung="Bài viết quá hay "/>,
document.getElementById('root')
);
Hoặc hiện nhiều ý kiến
import YKien from './HienComment';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<div className="listYkien">
<YKien hoten="Mai Anh Tới" noidung="Bài viết quá hay "/>
<YKien hoten="Đào Được Vàng" noidung="Bài viết tuyệt vời "/>
<YKien noidung="Bài này văn phong hùng hổ quá"/>
</div>,
document.getElementById('root')
);
Giá trị mặc định của Properties
Cách 1: Sử dụng cú pháp

import React from 'react';
class HienComment extends React.Component {
render(){
return (
<div className="comment">
<p> {this.props.hoten || "Không có"} </p>
<div> {this.props.noidung}</div>
</div>
);
}
}
export default HienComment;
Cách 02: Khai báo đối tượng defaultProps cho component như sau (ở phía sau component)
class TênComponent extends React.Component {}
TênComponent.defaultProps = {tenProp:'giá trị'}
Ví dụ:
import React from 'react';
class HienComment extends React.Component {
render(){
return (
<div className="comment">
<p> {this.props.hoten} </p>
<div> {this.props.noidung}</div>
</div>
);
}
}
HienComment.defaultProps = {
hoten: "Ẩn danh",
}
export default HienComment;
Hoặc khai báo đối tượng static defaultProps trong component như sau:
class ReactComp extends React.Component {
static defaultProps = {}
}
Ví dụ:
import React from 'react';
class HienComment extends React.Component {
static defaultProps = {
hoten: "Không nhập",
}
render(){
return (
<div className="comment">
<p> {this.props.hoten} </p>
<div> {this.props.noidung}</div>
</div>
);
}
}
export default HienComment;
Hoặc :
function TênComponent(props) {}
TênComponent.defaultProps = {}
Ví dụ:
import './Hien1Tin.css';
function Hien1Tin(props) { //const Hien1Tin = () =>
const t=
<div className="tin">
<h4 className="tieude">
<a href="#"> {props.tieude} </a>
Số lần xem <span> {props.xem} </span>
</h4>
<p className="mota">Mô tả tin</p>
</div>;
return t;
}
Hien1Tin.defaultProps = {
xem: 50,
}
export default Hien1Tin;
Test:
import Tin from './Hien1Tin';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<div className="listtin">
<Tin tieude="Hạnh phúc ở đâu" xem="72"/>
<Tin tieude="Dũng cảm và liều mạng"/>
</div>,
document.getElementById('root'));
Kiểu dữ liệu của tham số
Bạn có thể chỉ định kiểu dữ liệu của tham số (PropTypes) để code được trực quan hơn
import './Hien1Tin.css';
import PropsTypes from 'prop-types';
function Hien1Tin(props) { //const Hien1Tin = () =>
const t=
<div className="tin">
<h4 className="tieude">
<a href="#"> {props.tieude} </a>
Số lần xem <span> {props.xem} </span>
</h4>
<p className="mota">Mô tả tin</p>
</div>;
return t;
}
Hien1Tin.PropsTypes = {
tieude: PropsTypes.string,
xem: PropsTypes.number,
}
Hien1Tin.defaultProps = { xem: 50,}
export default Hien1Tin;
Dùng component bên trong component
Có thể tạo và sử dụng component bên trong 1 component đang có. Ví dụ trong component ChiTietTin, có component FormYKien
import React from 'react';
class FormYKien extends React.Component{
render(){
return (
<form method="post">
<p><input name="hoten" placeholder="Họ tên"></input></p>
<p><textarea name="noidungyk"></textarea></p>
</form>
);
}
}
class ChiTietTin extends React.Component {
render(){
return (
<div className="tin">
<p> {this.props.tieude} </p>
<div> {this.props.noidung}</div>
<hr/>
<FormYKien/>
</div>
);
}
}
export default ChiTietTin;
Hiện component:
import ChiTietTin from './ChiTietTin.js';
ReactDOM.render(
<div className="listtin">
<ChiTietTin tieude="Hạnh phúc ở đâu" noidung=""/>
</div>,
document.getElementById('root')
);
State trong component
Trong mỗi component có sẵn 1 đối tượng tên là state
. Đối tượng này là nơi lưu các biến dùng trong component . Khi state
thay đổi thì component sẽ được render lại.
class ChiTietTin extends React.Component {
constructor() {
super(props);
this.state = {caption:"Chi tiết tin"}
}
render(){
return (
<div className="tin">
<h4> {this.state.caption}</h4>
<p> {this.props.tieude} </p>
<div> {this.props.noidung}</div>
<hr/>
<FormYKien/>
</div>
);
}
}
export default ChiTietTin;
Thay đổi state: Để thay đổi state, bạn dùng hàm this.setState()
Chú ý là khi giá trị trong state
thây đổi thì component sẽ render lại, nghĩa là output sẽ đổi theo giá trị mới. Ví dụ:
class ChiTietTin extends React.Component {
constructor() {
super();
this.state = {caption:"Chi tiết tin"}
}
doiState = () => {
this.setState( {caption: "News Details"} );
}
render(){
return (
<div className="tin">
<h4> {this.state.caption}</h4>
<p> {this.props.tieude} </p>
<div> {this.props.noidung}</div>
<hr/>
<button type="button" onClick={this.doiState}> Đổi Cap</button>
<hr/>
<FormYKien/>
</div>
);
}
}
export default ChiTietTin;
Chú ý: trong hàm constructor,() nếu dùng super(props) thì trong hàm constructor() bạn mới có thể truy xuất các props theo kiểu this.props
Bạn có thể tham khảo thêm về component ở link này: https://www.w3schools.com/react/react_components.asp
Mời bạn xem bài tiếp theo Vòng đời của component trong React