Sử dụng React

Component trong React

01/07/2021

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

nhúng component vào trang js và hiện kết quả

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

Component trong React

Function component

Class Component

Conponent Constructor

Properties của component

Giá trị mặc định của Properties

Kiểu dữ liệu của tham số

Dùng component bên trong component

State trong component

BÀI VIẾT LIÊN QUANXEM THÊM

React với firebase

Sử dụng context trong React

Rest-based App React

BÀI VIẾT LIÊN QUAN XEM THÊM