Thêm hiệu ứng bật lên vào ứng dụng React.js của bạn

Thêm hiệu ứng bật lên vào ứng dụng React.js của bạn

Cửa sổ bật lên là một cách tuyệt vời để thu hút sự chú ý của người dùng và hiển thị thông tin quan trọng. Bạn có thể sử dụng chúng cho những thứ như thông báo xác nhận và thông báo lỗi. Hoặc bạn chỉ có thể sử dụng chúng để hiển thị thông tin bổ sung về một phần tử trên trang.





Trong React, có hai cách để tạo cửa sổ bật lên: sử dụng React hooks hoặc sử dụng mô-đun bên ngoài.



LÀM VIDEO TRONG NGÀY

Cách tạo cửa sổ bật lên trong React.js

Ngày thứ nhất, tạo một ứng dụng phản ứng đơn giản . Sau đó, bạn có thể thêm cửa sổ bật lên bằng một trong hai phương pháp. Bạn có thể sử dụng React hooks hoặc một mô-đun bên ngoài.





cách xoay bàn chải trong photoshop

1. Sử dụng React Hooks

Cách tiếp cận hooks đơn giản hơn và chỉ yêu cầu một vài dòng mã.

Đầu tiên, bạn cần tạo một chức năng sẽ mở cửa sổ bật lên. Bạn có thể xác định chức năng này trong thành phần sẽ hiển thị cửa sổ bật lên.



Tiếp theo, bạn cần sử dụng hook useState để tạo một biến trạng thái cho cửa sổ bật lên. Bạn có thể sử dụng biến trạng thái này để xác định xem cửa sổ bật lên có nên mở hay không.

Cuối cùng, bạn cần thêm một nút vào thành phần sẽ kích hoạt cửa sổ bật lên. Khi bạn nhấp vào nút này, hãy đặt biến trạng thái thành true, điều này sẽ khiến cửa sổ bật lên xuất hiện.



Hãy xem mã cho cách tiếp cận này:

import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Pop-up 
      </button> 
  
      {isOpen && ( 
       <div> 
        <div> 
          This is the content of the pop-up. 
        </div> 
        <button onClick={() => setIsOpen(false)}> 
           Pop-up 
        </button> 
       </div> 
      )} 
    </div> 
  ); 
} 
  
export default Example;

Đầu tiên, mã này nhập hook useState từ thư viện phản ứng lõi. Sau đó, hàm Ví dụ sử dụng hook useState để tạo một biến trạng thái được gọi là isOpen. Biến trạng thái này xác định xem cửa sổ bật lên có nên mở hay không.



Tiếp theo, thêm một nút vào thành phần sẽ kích hoạt cửa sổ bật lên. Khi bạn nhấp vào nút này, biến trạng thái sẽ được đặt thành true, điều này sẽ làm cho cửa sổ bật lên xuất hiện.

Cuối cùng, thêm một nút vào thành phần sẽ đóng cửa sổ bật lên. Khi bạn nhấp vào nút này, biến trạng thái sẽ được đặt thành false, điều này sẽ khiến cửa sổ bật lên biến mất.

phản ứng trang bằng một nút và mở cửa sổ bật lên

2. Sử dụng Mô-đun bên ngoài

Bạn cũng có thể tạo cửa sổ bật lên trong React bằng mô-đun bên ngoài. Có nhiều mô-đun có sẵn mà bạn có thể sử dụng cho mục đích này.

cách chuyển về bố cục facebook cũ 2020

Một mô-đun phổ biến là mô-đun phản ứng. react-modal là một mô-đun đơn giản và nhẹ cho phép bạn tạo các hộp thoại phương thức trong React.

Để sử dụng react-modal, trước tiên bạn cần cài đặt nó bằng npm:

npm install react-modal

Khi bạn đã cài đặt phương thức phản ứng, bạn có thể nhập nó vào thành phần React của mình:

import ReactModal from 'react-modal'; 
import React, { useState } from 'react'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={setIsOpen}>Open Modal</button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

Trong đoạn mã này, bạn vẫn đang sử dụng các móc React nhưng với mô-đun phản ứng. Với mô-đun phản ứng, bạn có thể thêm nhiều chức năng hơn vào cửa sổ bật lên. Như bạn có thể thấy, đoạn mã rất giống với cách tiếp cận trước đó. Sự khác biệt duy nhất là bây giờ bạn đang sử dụng thành phần ReactModal từ phương thức phản ứng thay vì tạo thành phần của riêng bạn.

Đầu tiên, bạn phải nhập mô-đun phản ứng. Sau đó, bạn sử dụng thành phần ReactModal để bao bọc nội dung của cửa sổ bật lên. Sử dụng isOpen prop để xác định xem phương thức có nên mở hay không.

phản ứng trang với một cửa sổ bật lên

Khi bạn đã tạo cửa sổ bật lên của mình, bạn có thể muốn thêm các tính năng bổ sung vào đó. Ví dụ: bạn có thể muốn đóng cửa sổ bật lên khi người dùng nhấp vào bên ngoài cửa sổ đó.

Để làm điều này, bạn cần sử dụng onRequest prop của thành phần react-modal. Chỗ dựa này nhận một chức năng làm giá trị của nó. Chức năng này sẽ chạy khi người dùng nhấp vào bên ngoài phương thức.

Ví dụ: để đóng cửa sổ bật lên khi người dùng nhấp vào bên ngoài nó, bạn sẽ sử dụng mã sau:

import React, { useState } from 'react'; 
import ReactModal from 'react-modal'; 
  
function Example() { 
  const [isOpen, setIsOpen] = useState(false); 
  
  return ( 
    <div> 
      <button onClick={() => setIsOpen(true)}> 
        Open Modal 
      </button> 
      <ReactModal 
        isOpen={isOpen} 
        contentLabel="Example Modal" 
        onRequest={() => setIsOpen(false)} 
      > 
        This is the content of the modal. 
      </ReactModal> 
    </div> 
  ); 
} 
  
export default Example;

Hàm mà chúng ta đang chuyển tới prop onRequest chỉ đơn giản đặt biến trạng thái isOpen thành false. Điều này sẽ khiến phương thức đóng.

Bạn cũng có thể thêm các đạo cụ khác vào thành phần ReactModal để tùy chỉnh thêm. Để có danh sách đầy đủ các đạo cụ, bạn có thể xem tài liệu về phương thức phản ứng.

Thêm kiểu trong cửa sổ bật lên

Khi bạn đã tạo cửa sổ bật lên của mình, bạn có thể muốn thêm một số kiểu cho nó. Có nhiều cách để tạo kiểu cho các thành phần React, nhưng chúng ta sẽ tập trung vào các kiểu nội tuyến.

Kiểu nội tuyến là kiểu mà bạn có thể thêm trực tiếp vào một thành phần React. Để thêm kiểu nội tuyến, bạn cần sử dụng thuộc tính kiểu. Thuộc tính này nhận một đối tượng làm giá trị của nó, trong đó các khóa là thuộc tính kiểu và các giá trị là giá trị kiểu.

các trang web phát trực tuyến phim miễn phí không cần đăng ký

Ví dụ: để thêm màu nền là trắng và chiều rộng 500px vào cửa sổ bật lên, bạn sẽ sử dụng mã sau:

import React from 'react'; 
  
function Example() { 
  return ( 
    <div style={{ backgroundColor: 'white', width: '500px' }}> 
      This is the content of the pop-up. 
    </div> 
  ); 
} 
  
export default Example;

Trong đoạn mã này, bạn thêm thuộc tính style vào phần tử div với thuộc tính backgroundColor và width. Bạn cũng có thể sử dụng CSS Tailwind trong ứng dụng react để tạo kiểu cho cửa sổ bật lên của bạn.

Tăng tỷ lệ chuyển đổi với cửa sổ bật lên

Cửa sổ bật lên có thể giúp tăng tỷ lệ chuyển đổi bằng cách hiển thị thông tin quan trọng cho người dùng. Ví dụ: bạn có thể sử dụng cửa sổ bật lên để hiển thị mã giảm giá hoặc ưu đãi đặc biệt. Bạn cũng có thể sử dụng cửa sổ bật lên để thu thập địa chỉ email cho bản tin của mình. Thêm cửa sổ bật lên vào ứng dụng React của bạn là một cách tuyệt vời để tăng tỷ lệ chuyển đổi.

Bạn cũng có thể dễ dàng triển khai ứng dụng React của mình miễn phí trên các trang GitHub.