REACTJS CĂN BẢN
REACTJS NÂNG CAO
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Render với điều kiện trong ReactJS

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:

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.
import React, { Component } from 'react';

export default class App extends Component {

  render() {
    var isLogin = true
    if(isLogin) {
      return (
        <div>
          <h3>Freetuts.net</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>Freetuts.net</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>Freetuts.net</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>Freetuts.net</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>freetuts.net - 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>
    );
  }
}

render co dieu kien reactjs 1 gif

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.

Cùng chuyên mục:

Xây dựng Hook trong React JS (React Custom Hook)

Xây dựng Hook trong React JS (React Custom Hook)

React Hooks là một tính năng mới trong React 16.8. Cho phép sử dụng state…

Tạo ứng dụng ghi chú với ReactJS và Redux

Tạo ứng dụng ghi chú với ReactJS và Redux

Trong bài viết này mình sẽ hướng dẫn xây dựng một ứng dụng ghi chú…

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cách đẩy ứng dụng ReactJS lên Heroku và Deploy trên đó

Cho bạn nào chưa bíết thì Heroku mà môt nền tảng đám mây hỗ trợ…

Tích hợp Redux vào ReactJS

Tích hợp Redux vào ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về cách tích…

Tạo máy tính đơn giản bằng ReactJS

Tạo máy tính đơn giản bằng ReactJS

Trong bài này ta sẽ xây dựng một ứng dụng máy tính đơn giản bằng…

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Redux là gì? Tại sao lại ứng dụng trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về Redux trong…

useContext trong React Hook

useContext trong React Hook

Trong bài viết này chúng ta sẽ cùnuseContextg nhau đi tìm hiểu về useContext trong…

React Router cơ bản

React Router cơ bản

Có thể khẳng định rằng những trang SPA (single page application) hiện đang rất phổ…

useEffect trong React Hooks

useEffect trong React Hooks

Trong bài viết này chúng ta sẽ đi tìm hiểu về useEffect trong React Hooks.…

Tìm hiểu React Hook useState

Tìm hiểu React Hook useState

React Hooks bao gồm rất 10 hooks khác nhau, trong phạm vi bài viết này…

Giới thiệu Hooks trong React JS

Giới thiệu Hooks trong React JS

Higher-Order Components trong ReactJS

Higher-Order Components trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Fragments trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Render Props trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Context trong ReactJS

Tìm hiểu về Refs trong ReactJS

Tìm hiểu về Refs trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về refs trong…

Kỹ thuật Lifting State Up trong ReactJS

Kỹ thuật Lifting State Up trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về kỹ thuật…

Tìm hiểu về List và Keys trong ReactJS

Tìm hiểu về List và Keys trong ReactJS

Trong bài viết này chúng ta sẽ cùng hau đi tìm hiểu về lists và…

Handling Events (xử lý sự kiện) trong ReactJS

Handling Events (xử lý sự kiện) trong ReactJS

Xử lý Form trong ReactJS

Xử lý Form trong ReactJS

Trong bài viết này chúng ta sẽ cùng nhau đi tìm hiểu về các thao…

Top