images
11/05/2021 07:25 am

ReactJs: Giao tiếp giữa các Components

Ở phần trước, chúng ta đã được học về thế nào là một component và cách để tạo ra một component đơn giản. Trong phần này, chúng ta sẽ tìm hiểu về các thành phần của một component và cách chúng giao tiếp với nhau thông qua các chủ đề sau:

Ở phần trước, chúng ta đã được học về thế nào là một component và cách để tạo ra một component đơn giản. Trong phần này, chúng ta sẽ tìm hiểu về các thành phần của một component và cách chúng giao tiếp với nhau thông qua các chủ đề sau:

- Props là gì?

- Sử dụng Props với Class Components

- Sử dụng Props với Functional Components

- State là gì?

- State vs Props


Props là gì?

- Props là từ viết tắt của Properties và nó không thể bị thay đổi.

- Mọi thông tin được truyền từ component cha sang component con được gọi là “props”.

- Props được truyền đến components thông qua thuộc tính HTML.

- Component nhận vào đối số như là một đối tượng props.

- Để truy cập các thông tin đó, chúng ta sử dụng biểu thức JSX “this.props”.


Sử dụng Props với Class Components

Tạo hai Class Components: Một component cha (Parent.js) và một component con (Child.js).

Parent.js

import React, { Component } from 'react';

export default class Parent extends Component {
render() {
    return (
      <div>
          <h1>I am parent Component</h1>
      </div>
    );
}
}


Child.js

import React, { Component } from 'react';

export default class Child extends Component {
render() {
    return (
      <div>
          <h3>I am Child Component</h3>
      </div>
    );
}
}


Gọi component Con bên trong component Cha

Đầu tiên, chúng ta cần import component Con vào Parent.js

import Child from './Child';

Và chỉ cần gọi <Child></Child> bên trong hàm render().

render() {
    return (
      <div>
          <h1>I am parent Component</h1>
    <Child></Child>
      </div>
    );
}
}

Chạy server, và chúng ta sẽ thấy nội dung của component Cha và component Con.

Truyền một vài giá trị từ component Cha sang component Con.

Trong file Parent.js, chúng ta khai báo thuộc tính “Title” cho Child và gán cho nó một vài giá trị.

import React, { Component } from 'react';
import Child from './Child';

export default class Parent extends Component {
render() {
  return (
      <div>
            <h1>I am parent Component</h1>
            <Child Title="I am text from Parent Component"></Child>
      </div>
  );
}
}


Và trong Child.js, chúng ta đơn giản lấy “Title” đã được set trong component Cha. Thuộc tính Title này được truy cập bằng cách sử dụng this.props.Title.

Để được thực hiện điều này, chúng ta cần sử dụng JSX syntax bằng việc thêm cặp dấu ngoặc nhọn { } để in ra giá trị.

import React, { Component } from 'react';

export default class Child extends Component {
render() {
    return (
      <div>
          <h3>I am Child Component</h3>
          <h3>{this.props.Title}</h3>
      </div>
    );
}
}


Kiểm tra trình duyệt, bạn có thể nhìn thấy “I am text from Parent Component” nghĩa là đã truyền thành công giá trị từ component Cha sang component Con.

Sử dụng Props với Functional Component

Trong Parent.js, gọi một Functional Component có tên là Demo1.js

Import và render Demo1 như dưới đây:

import React, { Component } from 'react';
import Child from './Child';\
import Demo1 from './Demo1'

export default class Parent extends Component {
  render() {
      return (
        <div>
          <h1>I am parent Component</h1>
          <Child Title="I am text from Parent Component">          </Child>
          <Demo1 Title="I am Text for function Component" ></Demo1>
      </div>
  );
}
}


Bạn có thể nhìn thấy thuộc tính Title ở trong Demo1. Như ví dụ trước, chúng ta cũng sẽ lấy Title trong Demo1 (functional) component.

Lưu ý rằng, đây là functional component. Chúng ta không có từ khóa this để lấy thông tin props. Nên là chúng ta sẽ truyền props như là một đối số của một hàm thông thường. Và dùng props.Title để lấy được giá trị.

Demo1.js

import React from 'react';

const Demo1 = (props) => {
  return (
      <div>
          <h1>Hello From function Component</h1>
          <h2>{props.Title}</h2>
      </div>
  );
}export default Demo1;

Chạy và kiểm tra kết quả.

State là gì?

- Hành vi của app/component tại một thời điểm nhất định được gọi là state.

- Dữ liệu components sẽ được lưu trong state của component.

- State này có thể được sửa đổi dựa vào hành động của người dùng.

- Khi một state của component bị thay đổi, React sẽ render lại component đó cho trình duyệt.


Chúng ta sẽ tìm hiểu state thông qua ví dụ sau:

Tạo một class component có tên là Sample component.

Ở đây, chúng ta khởi tạo một biến và hiển thị giá trị của nó. Sau đó, chúng ta sẽ tạo một cái Nút và khi click vào cái nút này, giá trị của biến vừa khởi tạo sẽ bị thay đổi và hiện ra màn hình.

Sample.js

import React, { Component } from "react";

export default class Sample extends Component {
state = {
    a: 'Hello'
};

render() {
  return (
      <div>
        <h1>{this.state.a}</h1>
      </div>
  );
}
}


Chúng ta đã khai báo một biến trong state và để truy cập nó, chúng ta dùng this.state.a

Chạy server và kiểm tra trên trình duyệt, bạn sẽ thấy “Hello” xuất hiện.

Bây giờ, tạo một cái nút và chúng ta sẽ sử dụng phương thức onClick. Khi click vào nút này, chúng ta sẽ thay đổi giá trị của “Hello” thành một giá trị khác trong thẻ h1.

Sample.js

import React, { Component } from "react";

export default class Sample extends Component {
state = {
    a: 'Hello'
};

handleButtonClick = () => {
  console.log("Inside Button Click");
  this.state.a = "You pressed Button";
};

render() {
  return (
      <div>
        <h1>{this.state.a}</h1>
        <button type="button" onClick={this.handleButtonClick} >Click Me</button>
      </div>
  );
}
}


Chúng ta đã tạo hàm handleButtonClick() của nút và bên trong sự kiện đó, chúng ta đã thay đổi giá trị của state.

Bạn có thể nhận thấy rằng khi bạn nhấn vào nút, giá trị của text không được cập nhật nhưng nó vẫn hiển thị trong console.

Vậy điều gì đã xảy ra?

Bạn có thể dễ dàng biết được nó bằng cách đọc màn hình hiển thị lỗi trong console.

Nó nói rằng, bạn không thể thay đổi trực tiếp giá trị của state mà bạn cần dùng hàm setState() để thực thi chúng.

Nên để cập nhật state, chúng ta dùng this.setState(). Nó là một phương thức được xây dựng sẵn để sửa đổi state.

Sample.js

import React, { Component } from "react";

export default class Sample extends Component {
state = {
    a: 'Hello'
};

handleButtonClick = () => {
  console.log("Inside Button Click");
  // this.state.a = "You pressed Button";
  this.setState({
      a: "you clicked Button"
  });
};

render() {
  return (
      <div>
        <h1>{this.state.a}</h1>
        <button type="button" onClick={this.handleButtonClick} >Click Me</button>
      </div>
  );
}
}


Chạy app và click vào Button:

Vậy là đoạn text đã bị thay đổi khi chúng ta click.

State vs Props

- Props là bất biến tức là một khi chúng ta đã set giá trị cho props thì chúng không thể bị thay đổi. Trong khi state dùng để lưu trữ dự có thể bị thay đổi theo thời gian và cũng được dùng để kiểm soát hành vi sau mỗi lần thay đổi.


- Props được set bởi component chứa nó, state thường được cập nhật bởi các trình xử lý sự kiện thông qua hàm setState().


Vậy là, chúng ta đã học được tất cả những khái niệm cơ bản của Reactjs. Như là làm sao để tạo ra một component và làm sao để truyền dữ liệu giữa các component lại với nhau.


Mời các bạn đọc thêm bài ReactJS Components


- Tech Zone


Thư giãn chút nào!!!

Bài viết liên quan