如何在 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 中创建点赞按钮的一种方法，还有许多其他方法可以实现相同的结果。