Học về Render trong ReactJS

Học về Render trong ReactJS là vấn đề được nhiều lập trình viên quan tâm, bởi những kiến thức trên trường lớp là không đủ, vì vậy bài Học về Render trong ReactJS sẽ chia sẻ tới bạn nhiều thông tin hữu ích

Mọi người vẫn hỏi tôi về việc học lập trình nói chung và ReactJS nói riêng có cần năng khiếu hay quá khó để tiếp cận hay không. Thì tôi có thể trả lời rằng, học lập trình cũng như việc bạn học tiếng Anh hay bất kỳ một ngôn ngữ khác, bởi lập trình...là ngôn ngữ của máy tính, để máy tính đọc và máy tính thực hiện theo yêu cầu của mình, bạn thích là học được.

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách để render với điều kiện trong ReacJS. Trong React, chúng ta có thể tạo ra các component riêng biệt, và chỉ định thành phần nào được render bằng cách sử dụng biểu thức điều kiện.

Render kèm điều kiện trong React, hoạt động tương tự như Javascript thông thường, bạn chỉ cần sử dụng biểu thức điều kiện if, hay conditional operator trong Javascript, sau đó React sẽ thực hiện nhiệm vụ kiểm tra điều kiện và render theo trường hợp yêu cầu. Ở đây mình có ví dụ về kiểm tra đăng nhập của người dùng:

import React, { Component } from 'react';
 
export default class App extends Component {
 
  render() {
    var isLogin = true
    if(isLogin) {
      return (
        <div>
          <h3>Hoidapcode.com</h3>
        </div>
      );
    }else{
      return(
        <div>
           <h3>Vui lòng đăng nhập</h3>
        </div>
      )
    }
  }
} 

Dưới đây, là một vài cách mà bạn có thể thêm điều kiện render trong các component.

1. Gán element vào biến

Chúng ta có thể lưu các element vào một biển. Đây là cách mà bạn có thể tùy chọn các element được hiển thị bằng cách thêm điều kiện vào cho nó. Giả sử, mình sẽ viết lại ví dụ ở trên bằng cách gán element vào biến.

import React, { Component } from "react";
 
export default class App extends Component {
  render() {
    const isLogin = true;
     
    if (isLogin) {
      //Gán element vào một biến
      var notification = <h3>Hoidapcode.com</h3>;
    } else {
      //Gán element vào một biến
      var notification = <h3>Vui lòng đăng nhập</h3>;
    }
     
    return <div>{notification}</div>;
  }
} 

Chúng ta sẽ nhận được kết quả giống như ví dụ ở đầu bài, ngoài ra bạn còn có thể sử dụng cú pháp conditional operator, ở đây mình có ví dụ :

import React, { Component } from "react";
 
export default class App extends Component {
  render() {
    const isLogin = true;
    //Conditional operator
    const notification = (isLogin) ? <h3>Hoidapcode.com</h3> : <h3>Vui lòng đăng nhập</h3>
 
    return <div>{notification}</div>;
  }
} 

2. Biểu thức điều kiện trong JSX

Ngoài cách sử dụng các biểu thức điều kiện bên ngoài hàm return() như ví dụ bên trên, chúng ta còn có thể sử dụng nó trong JSX bằng cách viết nó trong dấu ngoặc {}, chúng ta vẫn sẽ sử dụng ví dụ ở đầu bài:

import React, { Component } from "react";
 
export default class App extends Component {
  render() {
    const isLogin = true;
    return (
      <div>
        {isLogin ? (<h3>Hoidapcode.com</h3>) : (<h3>Vui lòng đăng nhập</h3>)}
      </div>
    );
  }
} 

Trong JSX bạn chỉ có thể sử dụng cú pháp conditional operator, kết quả hiển thị của ví dụ vừa rồi cũng có kết quả tương tự với ví dụ đầu tiên.

3. Ngăn chặn component render

Trong một số trường hợp nào đó, bạn sẽ muốn một component tự ẩn đi dù nó được render trong một component khác. Để làm được điều đó, ta sẽ trả về null thay vì trả về JSX.

 const Demo = (props) => {
  //Return về null để không hiển thị
  return null
}

Giả sử mình có một component hiển thị các thông báo:

import React, { Component } from "react";
const Notification = (props) => {
  //Kiểm tra giá trị của props
  if(props.isShow) {
    //Trả về JSX để hiển thị
    return (
        <ul>
          <li>Thông báo 1</li>
          <li>Thông báo 2</li>
        </ul>
    )
  }else{
    //Trả về null để ẩn
    return null
  }
}
export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isShowNotification: false
    };
  }
  render() {
 
    const {isShowNotification} = this.state
 
    return (
      <div style={{margin: 20}}>
        <p>Hoidapcode.com - lập trình ReactJS</p>
        <button onClick = {() => {
          //Cập nhật lại state
          this.setState({
            isShowNotification: !isShowNotification
          })
        }}>{isShowNotification ? 'Hiển thị' : 'Ẩn'}</button>
 
        {/* Gọi component Notification */}
        <Notification isShow = {isShowNotification}/>
      </div>
    );
  }
} 

Học về Render trong ReactJS

Trên đây chúng ta đã cùng nhau đi tìm hiểu về Render với điều kiện trong ReactJS. Đây là kiến thức rất cơ bản về nó nhưng cũng hết sức quan trọng trong quá trình làm việc với ReactJS sau này. Mong rằng bài viết sẽ giúp ích cho bạn.

Bài sau Bài tiếp

Hy vọng với bài viết về Học về Render trong ReactJS đã giải đáp giúp bạn phần nào về kiến thức lập trình ReactJS. Như tôi đã nói, ngôn ngữ lập trình không quan trọng bằng tư duy giải thuật, tư duy logic để giải quyết vấn đề.

Với những năm trước đây, lập trình viên là một cái nghề khó và kén chọn người học, đồng nghĩa với việc thu nhập hàng tháng của các lập trình viên luôn cao. Còn những năm gần đây, thì lập trình là môn học phổ thông, và ai cũng nên học một ngôn ngữ lập trình nào đó.

Nếu bạn còn bất kỳ câu hỏi nào trong việc học lập trình online, hãy gửi yêu cầu cho tôi qua email hoidapcode.com@gmail.com hoặc để lại comment bên dưới, tôi sẽ giải đáp trong vòng 24 giờ!

Blog hoidapcode.com là blog được tổng hợp tự động các bài học, thông tin về lập trình trên mạng internet. Nếu bạn có ý kiến hoặc đóng góp về bài viết này, hãy liên hệ với tôi!