React - truyền dữ liệu từ component con đến cha thông qua callback
TIL
618
@100daysTIL
72
White

Minh-Trung Nguyễn viết ngày 24/03/2018

React - truyền dữ liệu từ component con đến cha thông qua callback

Day32

Bài toán: Với 1 React app có tổ chức component như dưới đây, làm sao để mỗi lần có thay đổi ở component VideoListItem, thì component VideoDetail cũng thay đổi theo.

App
|
|
+---SearchBar
|
+---VideoList
|     |
|     +---VideoListItem
|
+---VideoDetail

Giải quyết: Case này lấy từ tutorial của Stephen Grider, course "Moden React with Redux" trên Udemy. Tác giả không đặt bài toán như trên, mà đi thẳng vào code như sau:

  • Bước 1: Từ component App, truyền 1 callback function vào component VideoList dưới dạng props. Code như sau:
  // bên trong component App

  <VideoList onVideoSelect={value => this.setState(value)} />

  <VideoDetail video={this.state.value} />

Callback function ở đây chính là đoạn value => this.setState(value) (viết dưới dạng hàm mũi tên)

Chưa dám nói đến vụ callback, chỉ riêng function này (tạm gọi tên là videoSelect) có tác dụng nhận vào 1 value (1 object), truyền sang cho hàm setState(). Một khi hàm setState() được gọi (ở đâu đó), nó sẽ thay đổi state của App, mà state này liên quan đến VideoDetail, khiến cho React render lại VideoDetail.

  • Bước 2: Từ component VideoList, truyền tiếp function videoSelect kia cho VideoListItem, cũng dưới dạng props.
  // bên trong VideoList

  <VideoListItem
    onVideoSelect = {props.onVideoSelect}
  />
  • Bước 3: Bên trong component VideoListItem, tạm lấy ví dụ là truyền function kia vào event handler onClick của 1 element <li> nào đó:
  // bên trong VideoListItem

  <li onClick={() => onVideoSelect(value)}>
  // ...
  </li>

Mỗi khi bạn <li> này bị click, thì function videoSelect sẽ được gọi. Event handler onClick của <li> sẽ truyền value cho videoSelect. Vậy là function đã có đủ mọi thứ để thực thi, và nó sẽ chạy đúng với mục đích ban đầu đặt ra ở bước 1.

Nhận xét:

Function videoSelect đã du lịch qua 2 cấp, từ App -> VideoList, rồi VideoList -> VideoListItem. Đến tận VideoListItem nó mới được truyền tham số để chạy, đáng nhẽ nó phải chạy trong không gian của VideoListItem, vậy mà dường như nó chạy trong không gian của App, kích động phản ứng ở trong App. Nghe có vẻ không đúng lắm với những gì vẫn nghe, rằng state của mỗi component đều độc lập, không liên quan đến nhau.

Với giải thích từ bài Passing Data Between React Components trên Medium, thì có vài thứ sáng tỏ thêm:

  1. Do cách giảng bài, mà tác giả trên Udemy khiến cho mình nghĩ là đang đi từ component cha (parent) đến component con. Nhưng thực ra, đây là bài toán mà tác giả trên Medium gọi là bài toán mà luồng dữ liệu truyền từ con đến cha, trong bài toán này cần sử dụng callback và state. Việc phân loại thế này khiến cho tình huống trở nên sáng sủa vô cùng, giúp mình hiểu sẽ phải áp dụng cách làm tương tự trong tương lai. Cách xử lý này khác với cách xử lý khi luồng dữ liệu truyền từ cha đến con (sử dụng props).

  2. Về câu hỏi tại sao setState() dù được gọi trong không gian của component con, mà vẫn cho kết quả cứ như là đang chạy trong không gian của component cha, hóa ra là do tác dụng của hàm mũi tên và this, giúp cho setState() vẫn giữ nguyên context của component cha. Điểm này cần tiếp tục kiểm tra.

ngminhtrung 24-03-2018

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Minh-Trung Nguyễn

58 bài viết.
75 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
45 15
Đăng lại một bài đã viết từ cách đây mấy tháng. Chủ đề này đã có không ít, nhưng chẳng hiểu sao lượng bài tự viết của dân lập trình người Việt ta v...
Minh-Trung Nguyễn viết 5 tháng trước
45 15
White
28 5
Ghi chú: Tiêu đề hoàn toàn mang tính câu view. Bài copy từ blog của tác giả :) Tại sao lại có bài viết này? Một ngày đẹp giời tôi cần kiểm t...
Minh-Trung Nguyễn viết 9 tháng trước
28 5
White
16 4
Về bước tìm và xử lý dữ liệu của Việt Nam phục vụ Data Visualization nền web Làm việc với D3js được nửa năm, một trong những điều bận lòng là chưa...
Minh-Trung Nguyễn viết 5 tháng trước
16 4
Bài viết liên quan
White
0 2
fCC: Technical Documentation Page note So I have finished the HTML part of this exercise and I want to come here to lament about the lengthy HTML ...
HungHayHo viết 3 tháng trước
0 2
White
20 1
Toán tử XOR có tính chất: + A XOR A = 0 + 0 XOR A = A Với tính chất này, có thể cài đặt bài toán sau với độ phức tạp O(N) về runtime, và với O(1)...
kiennt viết gần 2 năm trước
20 1
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
58 bài viết.
75 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!