React Cách điều hướng hiển thị trên view

Trong React mỗi component sẽ trả về một view, Sự kết hợp của các component tạo thành giao diện của web. Khi số lượng các component nhiều thì các hiển thị các component trở nên khó kiểm soát.

Cần tạo ra 1 cơ chế quản lý hiển thị các component hiệu quả và rõ ràng.

• Ví dụ: khi có 3 compoennt : A, B , C . -Yêu cầu: Hiển thị A, không hiển thị B,C khi x = 1 Hiển thị B không hiển thị A,C khi x = 2 Hiển thị C không hiển thị A, B khi x = 3

Cách đơn giản nhất là sử dụng if else như sau:

   let result = null;
   if(x == 1) result = () => (<A></A>);
   else if(x == 2) result = () => (<B></B>);
   else if(x == 3) result = () => (<C></C>);
   
   <div>
       {{result}}
   </div>

Nhưng cách này sẽ làm rối bị dài và rối khi số lượng các component lớn, điều kiện nhiều hơn, khó quản lý nữa. Mình xin giới thiệu một cách đơn giản mà hiệu quả, hoạt động dựa trên props.

Ý tưởng: Tạo ra 1 component tên Policy , sử dụng trên view như sau:

    <Policy
        b={B}
        c={C}
    >
        {A}
    </Policy>

Component A được đặt trong Policy , bản chất là truyền props tên 'children'(bạn có thể thử debugg trong componenr Policy để thấy điều này) Như vậy mình sẽ điều khiển việc hiển thị trong hàm render của component Policy, bây giờ cần truyền thêm props điều kiện để hiện thị nữa thêm điều kiện thông qua props permit:

    <Policy  permit={{1: 'a', 2: 'b', 3: 'c'}}
        b={B}
        c={C}
    >
        {A}
    </Policy>

• xử lý hiển thị trong component Policy:

   render() {
      let x = 2 // gái trị của biến x để kiểm tra
      let permit = this.props['permit'];
      let result = null;
      for(let key in Objects.keys(permit)) {
          if(key == x) result permit[key]';
          break;
      }
      return this.props[result];
  }

Khi giá trị của x thỏa mãn 1 điều kiện sẽ trả về component tương ứng, ở đây x === 2 nên sẽ trả về component B, khi đó B sẽ được render còn A,C thì không.

• Trên đây là cách xửa lý đơn giản để điều hướng hiển thị, bạn có thể modify cho các tính huống cao hơn, ví dụ là hiển thị nhiều component 1 lúc hay điều kiện hiển thị phức tạp hơn ví dụ điều kiện như sau:

let allowFunction = [index, create, update, new];
<Policy
    permit = {{
      {action: [create, delete], result: 'a} ,
      {action: [new], result: 'b'} ,
       {action: [index], result: 'a,b,c'} ,
    }}
    a={A}
    b={B}
    c={C}
>
</Policy>

Có 1 lượng các quyền allowFunction, Khí có quyền create và delete thì render A, khi có quyền index thì render B, khi có quyền new thì render cả A, B, C Như vậy bạn hoàn toàn có thể áp dụng cách này cho nhiều tình huống cụ thể khác nhau.

Mình vừa trình bày xong cách của mình , bạn nào có cách khác thì hãy comment cho mình biết với nhé. Xin cảm ơn.