資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在 ReactJS 中建立響應式點贊按鈕？
在 ReactJS 中建立響應式點贊按鈕是提高 Web 應用程式互動性的絕佳方法。本文將討論在 ReactJS 中建立響應式點贊按鈕所需的步驟，並提供一些示例程式碼幫助您入門。
讓我們首先了解 React 元件的基本結構。React 元件是一個生成 React 元素的 JavaScript 函式。React 元素是一個簡單的 JavaScript 物件，用於描述 DOM 節點。“點贊”按鈕的元件將是一個按鈕元素，使用者可以點選它來表達他們對某段內容的認可。
步驟 1：設定 React 專案
首先，您需要設定一個 React 專案。如果您還沒有專案，可以使用 create-react-app 命令來設定一個新專案。
npx create-react-app my-app cd my-app npm start
這將在 "my-app" 目錄中建立一個新專案，並啟動一個開發伺服器，以便您可以線上預覽更改。
步驟 2：建立點贊按鈕元件
在設定了一個簡單的 React 專案後，我們現在可以為我們的“點贊”按鈕構建一個新的元件。在專案的 src 目錄中，建立一個名為 **LikeButton.js** 的新檔案。
import React, { useState } from 'react';
function LikeButton() {
const [likes, setLikes] = useState(0);
return (
<button onClick={() => setLikes(likes + 1)}>
{likes} Likes
</button>
);
}
export default LikeButton;
在此程式碼中，我們從 react 包中匯入了 React 和 useState 鉤子。我們可以使用 useState 鉤子向我們的元件新增狀態 - 在這種情況下，是點贊數。初始狀態設定為 0，當按鈕被點選時，setLikes 函式用於更新狀態並使用更新的點贊數重新渲染元件。
步驟 3：將點贊按鈕新增到 App
現在我們有了點贊按鈕元件，我們需要將其包含在我們的應用程式中。為此，我們將 LikeButton 元件新增到 JSX 中，並將其匯入到 **App.js 檔案** 中。
import React from 'react';
import LikeButton from './LikeButton';
function App() {
return (
<div>
<LikeButton />
</div>
);
}
export default App;
步驟 4：設定點贊按鈕樣式
最後，我們可以為我們的“點贊”按鈕設定樣式，使其看起來像一個真正的按鈕。為此，只需將 CSS 檔案匯入到 LikeButton.js 程式碼中並新增它。
// LikeButton.js import './App.css';
在 App.css 中定義 CSS 如下：
//App.css
.like-button-container {
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.like-button {
border: none;
outline: none;
background-color: transparent;
font-size: 18px;
font-weight: bold;
color: #333;
cursor: pointer;
transition: all 0.2s ease-in-out;
padding: 10px 20px;
border: 2px solid #333;
}
.like-button:hover {
color: #fff;
background-color: #333;
}
.like-button.liked {
color: #ff69b4;
border-color: #ff69b4;
}
/* For mobile screens */
@media (max-width: 768px) {
.like-button-container {
flex-direction: column;
}
.like-button {
font-size: 16px;
margin-bottom: 10px;
padding: 8px 16px;
border-width: 1px;
}
}
步驟 5：為點贊狀態新增條件樣式
可以向我們的按鈕新增條件樣式以指示它是否已被點贊。為了跟蹤按鈕是否被點贊，我們可以向我們的元件新增一個新的狀態變數。一旦按鈕被點贊，我們可以使用此狀態變數為其提供不同的類。
// LikeButton.js
import React, { useState } from "react";
import "./App.css";
function LikeButton() {
const [likes, setLikes] = useState(0);
const [liked, setLiked] = useState(false);
return (
<button
className={`like-button ${liked ? 'liked' : ''}`}
onClick={() => {
setLikes(likes + 1);
setLiked(true);
}}
>
{likes} Likes
</button>
);
}
export default LikeButton;
在我們的 CSS 檔案中，我們可以為點贊狀態新增一個新的類。
步驟 6：使點贊按鈕響應式
我們可以使用 CSS 媒體查詢根據螢幕尺寸以不同的方式設定“點贊”按鈕的樣式。例如，如果螢幕寬度小於 500px，我們可以更改按鈕的文字大小。
在較小的顯示屏上，我們可以使用 flexbox 使按鈕填充其容器的整個寬度。
/* App.css */
.like-button-container {
display: flex;
justify-content: center;
}
/* LikeButton.js */
return (
<div className="like-button-container">
<button
className={`like-button ${liked ? 'liked' : ''}`}
onClick={() => {
setLikes(likes + 1);
setLiked(true);
}}
>
{likes} Likes
</button>
</div>
);
完成這些步驟後，您的 ReactJS 應用程式現在應該有一個完全響應式且可操作的“點贊”按鈕。此“點贊”按鈕還可以進一步修改和增強，以更好地滿足您的應用程式的需求。
輸出
您還可以讓人們可以選擇不喜歡帖子，並且您還可以將點贊數儲存在資料庫中，以便它在頁面重新整理後保持不變。還可以新增顯示點贊使用者姓名的功能。這可以透過呼叫返回點贊使用者列表的 API 端點並在列表中顯示它們來實現。
透過包含一個分享按鈕並將其連線到社交媒體網路的分享端點，您還可以新增一個功能，讓人們可以在這些平臺上分享帖子。
結論
您應該能夠使用提供的示例程式碼建立一個簡單的“點贊”按鈕，然後可以對其進行自定義和增強以滿足您應用程式的特定需求。
但是，請記住，這只是在 ReactJS 中建立點贊按鈕的一種方法，還有許多其他方法可以實現相同的結果。
5K+ 瀏覽量
