บทนำ
เมื่อสร้างแอปพลิเคชัน React ที่ดึงเนื้อหาจากแหล่งภายนอกที่ใช้เวลาในการโหลด ถือเป็นความคิดที่ดีเสมอที่จะมอบประสบการณ์การใช้งานที่น่าพึงพอใจโดยดึงดูดผู้ใช้และรักษาความสนใจด้วยตัวโหลด เนื่องจากสิ่งนี้จะช่วยให้ผู้ใช้เข้าใจถึงสิ่งที่เกิดขึ้นมากกว่า กว่าปล่อยให้พวกเขาคาดเดา
ในคู่มือนี้ เราจะเรียนรู้วิธีแสดงแอนิเมชั่นตัวโหลดเมื่อโหลดแอปพลิเคชันและดึงเนื้อหาจากแหล่งภายนอกโดยใช้
react-spinners
ห้องสมุด.
ด้วยเหตุนี้ เราจะสร้างแอปพลิเคชันขนาดเล็กที่ดึงใบเสนอราคา โดยมีหน้าจอการโหลดในขณะที่กำลังดึงใบเสนอราคา:
หากคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการสร้างสปินเนอร์ตั้งแต่เริ่มต้น โปรดอ่าน “วิธีสร้างแอนิเมชั่นการโหลดใน React ตั้งแต่เริ่มต้น”!
การสร้างตัวอย่าง React App
เริ่มต้นด้วยการดูที่มาร์กอัป React ของเรา โดยพื้นฐานแล้ว เรามีสอง <div>
องค์ประกอบใน ผู้ปกครอง <div>
(เพื่อความเรียบง่าย) – หนึ่งคือ loader-container
และที่สองคือ main-content
:
import React from 'react'; const App = () => { return ( <div className="container"> <div className="loader-container"> <div className="spinner"></div> </div> <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote"> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote"> If you do not express your own original ideas, if you do not listen to your own being, you will have betrayed yourself. </blockquote> - <span className="author">Rollo May</span> </div> </div> </div> );
}; export default App;
จนถึงตอนนี้ เราได้สร้างเพียง <div>
สำหรับรถตักของเรา ตอนนี้ มาดูกันว่าเราจะเพิ่มและเรียกใช้เมื่อเนื้อหาบางรายการโหลดได้อย่างไร
หมายเหตุ คุณสามารถตรวจสอบ ที่เก็บนี้ และตรวจสอบรหัสหากจำเป็นในขณะที่อ่านคู่มือนี้
การใช้ React Spinners ในแอปพลิเคชันของเรา
react-spinner
คือชุดของสปินเนอร์มากมายที่เราสามารถใช้ได้ในแอปพลิเคชัน React ของเรา ในการใช้ React spinner ก่อนอื่นเราต้องติดตั้งไลบรารี่ในไดเร็กทอรีของโครงการของเราโดยใช้คำสั่งต่อไปนี้:
$ npm install --save react-spinners
// Or
$ yarn add react-spinners
เมื่อเสร็จแล้ว เราสามารถนำเข้าตัวโหลดเฉพาะที่เราต้องการใช้ (ในกรณีนี้คือ a ClipLoader
) และกำหนดสไตล์เช่นขนาดและสี:
import React, { useState, useEffect } from 'react';
import ClipLoader from 'react-spinners/ClipLoader'; const App = () => { const [loadingInProgress, setLoading] = useState(false); <!-- ... --> return ( <div className="container"> {loadingInProgress ? ( <div className="loader-container"> <ClipLoader color={'#fff'} size={150} /> </div> ) : ( <div className="main-content"> <h1>Hello World!</h1> <p> This is a demo Project to show how to add animated loading with React. </p> <div className="buttons"> <button className="btn"> <a href="#">Read Article</a> </button> <button className="btn get-quote" onClick={getRandomQuote}> Generate Quote </button> </div> <div className="quote-section"> <blockquote className="quote">{quote.content}</blockquote>-{' '} <span className="author">{quote.author}</span> </div> </div> )} </div> );
}; export default App;
พื้นที่ react-spinner
ไลบรารีมีคุณสมบัติที่มีประโยชน์มากมาย เช่น เราสามารถใช้เพื่อจัดการการโหลดโดยไม่ต้องใช้ตัวดำเนินการ ternary:
<ClipLoader color={'#fff'} loading={loadingInProgress} size={150} />
แทนที่จะใช้ตัวดำเนินการ ternary เพื่อแสดงเนื้อหาตามค่าของ loadingInProgress
ตัวแปร เราก็แค่ใช้ loading={loadingInProgress}
แทน.
นอกจากนี้เรายังสามารถเปลี่ยน CSS ที่ใช้ในการควบคุม spinner-icon
โดยใช้ไฟล์ override
แอตทริบิวต์:
import { useState } from "react";
import { css } from "@emotion/react";
import ClipLoader from "react-spinners/ClipLoader"; const override = css` display: block; margin: 0 auto; border-color: red;
`; function App() { let [loadingInProgress, setLoading] = useState(true); return ( <div className="container"> <ClipLoader color={'#fff'} loading={loadingInProgress} css={override} size={150} /> // ... </div> );
} export default App;
หมายเหตุ เราสามารถอ่านเพิ่มเติมเกี่ยวกับ react-spinner
ใน เอกสารที่เราสามารถดูรายชื่อคนบาปที่มีอยู่ได้เช่นกัน
สรุป
ในคู่มือฉบับย่อนี้ เราได้มาดูวิธีการใช้งานของคุณ react-spinners
เพื่อเพิ่มสปินเนอร์การโหลดให้กับองค์ประกอบใน React
- a
- เกี่ยวกับเรา
- เสมอ
- app
- การใช้งาน
- การใช้งาน
- ความสนใจ
- รถยนต์
- ใช้ได้
- เป็นพื้น
- กำลัง
- ปิดกั้น
- สร้าง
- รหัส
- ชุด
- ภาชนะ
- เนื้อหา
- ควบคุม
- สร้าง
- ที่สร้างขึ้น
- การสร้าง
- แสดง
- องค์ประกอบ
- ตัวอย่าง
- ประสบการณ์
- คุณสมบัติ
- ชื่อจริง
- ดังต่อไปนี้
- ราคาเริ่มต้นที่
- สร้าง
- ไป
- ดี
- ให้คำแนะนำ
- จัดการ
- จะช่วยให้
- สรุป ความน่าเชื่อถือของ Olymp Trade?
- ทำอย่างไร
- HTTPS
- ICON
- ความคิด
- ความคิด
- ติดตั้ง
- IT
- การเก็บรักษา
- เรียนรู้
- ห้องสมุด
- รายการ
- โหลด
- โหลด
- ดู
- ที่ต้องการหา
- ข้อมูลเพิ่มเติม
- ผู้ประกอบการ
- ผู้ประกอบการ
- ของตนเอง
- ในสิ่งที่สนใจ
- โครงการ
- ให้
- เกิดปฏิกิริยา
- การอ่าน
- วิ่ง
- จอภาพ
- ชุด
- สั้น
- ขนาด
- เล็ก
- บาง
- พื้นที่
- เวลา
- เข้าใจ
- ใช้
- ผู้ใช้
- การใช้ประโยชน์
- ความคุ้มค่า
- อะไร
- ความหมายของ
- ในขณะที่
- ไม่มี
- XML
- ของคุณ