เพิ่มเอฟเฟกต์ป๊อปอัปให้กับแอป React.js ของคุณ

เพิ่มเอฟเฟกต์ป๊อปอัปให้กับแอป React.js ของคุณ

ป๊อปอัปเป็นวิธีที่ยอดเยี่ยมในการดึงดูดความสนใจของผู้ใช้และแสดงข้อมูลที่สำคัญ คุณสามารถใช้สำหรับสิ่งต่างๆ เช่น ข้อความยืนยันและข้อความแสดงข้อผิดพลาด หรือคุณสามารถใช้เพื่อแสดงข้อมูลเพิ่มเติมเกี่ยวกับองค์ประกอบในหน้า





ใน React มีสองวิธีในการสร้างป๊อปอัป: ใช้ React hooks หรือใช้โมดูลภายนอก



การทำวิดีโอประจำวัน

วิธีสร้างป๊อปอัปใน React.js

อันดับแรก, สร้างแอปตอบโต้อย่างง่าย . หลังจากนั้น คุณสามารถเพิ่มป๊อปอัปโดยใช้วิธีใดวิธีหนึ่งจากสองวิธี คุณสามารถใช้ React hooks หรือโมดูลภายนอก





node.js: javascript ฝั่งเซิร์ฟเวอร์

1. การใช้ React Hooks

วิธีการของ hooks นั้นง่ายกว่าและต้องการโค้ดเพียงไม่กี่บรรทัด

ขั้นแรก คุณต้องสร้างฟังก์ชันที่จะเปิดป๊อปอัป คุณสามารถกำหนดฟังก์ชันนี้ในคอมโพเนนต์ที่จะแสดงป๊อปอัป



ถัดไป คุณต้องใช้ useState hook เพื่อสร้างตัวแปรสถานะสำหรับป๊อปอัป คุณสามารถใช้ตัวแปรสถานะนี้เพื่อกำหนดว่าควรเปิดป๊อปอัปหรือไม่

สุดท้าย คุณต้องเพิ่มปุ่มในคอมโพเนนต์ของคุณที่จะเรียกป๊อปอัป เมื่อคุณคลิกปุ่มนี้ ให้ตั้งค่าตัวแปรสถานะเป็น true ซึ่งจะทำให้ป๊อปอัปปรากฏขึ้น



ดูรหัสสำหรับวิธีนี้:

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;

ขั้นแรก รหัสนี้นำเข้าขอ useState จากไลบรารีตอบสนองหลัก จากนั้น ฟังก์ชัน Example ใช้ตะขอ useState เพื่อสร้างตัวแปรสถานะที่เรียกว่า isOpen ตัวแปรสถานะนี้กำหนดว่าควรเปิดป๊อปอัปหรือไม่



ถัดไป เพิ่มปุ่มไปยังส่วนประกอบที่จะเรียกป๊อปอัป เมื่อคุณคลิกปุ่มนี้ ตัวแปรสถานะจะถูกตั้งค่าเป็นจริง ซึ่งจะทำให้ป๊อปอัปปรากฏขึ้น

สุดท้าย เพิ่มปุ่มไปยังส่วนประกอบที่จะปิดป๊อปอัป เมื่อคุณคลิกปุ่มนี้ ตัวแปรสถานะจะถูกตั้งค่าเป็นเท็จ ซึ่งจะทำให้ป๊อปอัปหายไป

ตอบสนองหน้าด้วยปุ่มเดียวและเปิดป๊อปอัป

2. การใช้โมดูลภายนอก

คุณยังสามารถสร้างป๊อปอัปใน React โดยใช้โมดูลภายนอกได้อีกด้วย มีโมดูลมากมายที่คุณสามารถใช้เพื่อจุดประสงค์นี้

โมดูลหนึ่งที่ได้รับความนิยมคือ react-modal react-modal เป็นโมดูลที่เรียบง่ายและมีน้ำหนักเบาที่ช่วยให้คุณสร้างไดอะล็อกโมดอลใน React

ในการใช้ react-modal คุณต้องติดตั้งโดยใช้ npm ก่อน:

npm install react-modal

เมื่อคุณติดตั้ง react-modal แล้ว คุณสามารถนำเข้าไปยังส่วนประกอบ React ของคุณได้:

ฉันมีการ์ดจออะไรบ้าง 
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;

ในโค้ดนี้ คุณยังคงใช้ React hooks แต่ใช้โมดูล react-modal ด้วยโมดูล react-modal คุณสามารถเพิ่มฟังก์ชันการทำงานให้กับป๊อปอัปได้มากขึ้น อย่างที่คุณเห็น โค้ดนี้คล้ายกับวิธีก่อนหน้านี้มาก ข้อแตกต่างเพียงอย่างเดียวคือตอนนี้คุณกำลังใช้องค์ประกอบ ReactModal จาก react-modal แทนที่จะสร้างของคุณเอง

ขั้นแรก คุณต้องนำเข้าโมดูล react-modal จากนั้น คุณใช้องค์ประกอบ ReactModal เพื่อตัดเนื้อหาของป๊อปอัปของคุณ ใช้ isOpen prop เพื่อกำหนดว่าควรเปิด modal หรือไม่

ตอบสนองหน้าด้วยป๊อปอัป

เมื่อคุณสร้างป๊อปอัปแล้ว คุณอาจต้องการเพิ่มคุณลักษณะเพิ่มเติมเข้าไป ตัวอย่างเช่น คุณอาจต้องการปิดป๊อปอัปเมื่อผู้ใช้คลิกภายนอก

ในการทำเช่นนี้ คุณต้องใช้ onRequest prop ของส่วนประกอบ react-modal พร็อพนี้ใช้ฟังก์ชันเป็นค่าของมัน ฟังก์ชันนี้จะทำงานเมื่อผู้ใช้คลิกนอกโมดอล

ตัวอย่างเช่น หากต้องการปิดป๊อปอัปเมื่อผู้ใช้คลิกภายนอก คุณจะต้องใช้รหัสต่อไปนี้:

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;

ฟังก์ชั่นที่เราส่งผ่านไปยัง onRequest prop เพียงแค่ตั้งค่าตัวแปรสถานะ isOpen เป็นเท็จ ซึ่งจะทำให้โมดอลปิดลง

คุณยังสามารถเพิ่มอุปกรณ์ประกอบฉากอื่นๆ ให้กับองค์ประกอบ ReactModal เพื่อปรับแต่งเพิ่มเติมได้ สำหรับรายการอุปกรณ์ประกอบฉากทั้งหมด คุณสามารถดูเอกสารประกอบปฏิกิริยาตอบสนอง

การเพิ่มสไตล์ในป๊อปอัป

เมื่อคุณสร้างป๊อปอัปแล้ว คุณอาจต้องการเพิ่มสไตล์ให้กับป๊อปอัป มีหลายวิธีในการจัดรูปแบบองค์ประกอบ React แต่เราจะเน้นที่รูปแบบอินไลน์

วิธีการสะท้อนข้อความในคำ

สไตล์อินไลน์คือสไตล์ที่คุณสามารถเพิ่มไปยังองค์ประกอบ React ได้โดยตรง ในการเพิ่มสไตล์อินไลน์ คุณต้องใช้คุณสมบัติสไตล์ คุณสมบัตินี้ใช้อ็อบเจ็กต์เป็นค่าของมัน โดยที่คีย์คือคุณสมบัติสไตล์ และค่าคือค่าสไตล์

ตัวอย่างเช่น ในการเพิ่มสีพื้นหลังสีขาวและความกว้าง 500px ให้กับป๊อปอัป คุณจะต้องใช้รหัสต่อไปนี้:

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;

ในโค้ดนี้ คุณจะเพิ่มคุณสมบัติสไตล์ให้กับองค์ประกอบ div ด้วยคุณสมบัติ backgroundColor และ width นอกจากนี้คุณยังสามารถ ใช้ Tailwind CSS ในแอปตอบโต้ เพื่อจัดรูปแบบป๊อปอัปของคุณ

เพิ่มอัตราการแปลงด้วยป๊อปอัป

ป๊อปอัปสามารถช่วยเพิ่มอัตราการแปลงโดยการแสดงข้อมูลที่สำคัญต่อผู้ใช้ ตัวอย่างเช่น คุณสามารถใช้ป๊อปอัปเพื่อแสดงรหัสส่วนลดหรือข้อเสนอพิเศษ คุณยังสามารถใช้ป๊อปอัปเพื่อรวบรวมที่อยู่อีเมลสำหรับจดหมายข่าวของคุณ การเพิ่มป๊อปอัปในแอป React เป็นวิธีที่ยอดเยี่ยมในการเพิ่มอัตราการแปลง

คุณยังสามารถปรับใช้แอปพลิเคชัน React ของคุณได้ฟรีบนหน้า GitHub