Component trong React

Component trong React hướng dẫn cách tạo component, khai báo và dùng tham 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 nhé.

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 do 1 component đảm trách).

Hai loại component trong React
  • 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 nhớ phải chạy lệnh super() để chạy constructor của React trước nhé.
  • Tạo component: Có hai cách tạo là class và function.  Bạn dùng cách nào cũng được.

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

nhúng component và hiện ra kết quả

Class Component

Để tạo component  dạng class, bạn khai báo 1 class javascript 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ư bên 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 lúc khi gọi component. Trong hàm constructor, bạn code để gán giá trị khởi đầu cho các biến hoặc kiềm tra giá trị các biến.. Các biến trong component được lưu 1 đới tượng có tên là state.

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.

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). Bạn có thể truyền tham số cho component và sử dụng giá trị tham số trong component.

Cách truyền thuộc tính cho component thì giống như dùng thuộc tính HTML.  Còn bên trong component, cú pháp nhận các props là như sau:

cú pháp dùng props trong component

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

cách dùng giá trị mặc định của props
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ái đố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

Bạn 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 components 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, nfghĩ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