如何在 ReactJS 中创建 Instagram Like 按钮？

Instagram Like 按钮是许多社交媒体平台的标志性特征之一。在ReactJS中创建一个Instagram Like按钮是一项相对简单的任务，本文将提供完整的步骤。

步骤

第一步

首先，我们需要在ReactJS项目中安装react-icons。在终端执行以下命令：

npm install react-icons

第二步

在组件中引入所需的图标组件。在这里我们需要使用FcLike图标：

import { FcLike } from 'react-icons/fc';

第三步

考虑一个变量liked并为其分配一个初始值false，以表示该按钮是否已经被单击。此变量可在组件中定义：

const [liked, setLiked] = useState(false);

第四步

创建按钮并添加条件以在单击时更改状态。这样，当用户单击按钮时，该按钮的状态将更改并且原始按钮将替换为不同的图标。

<button onClick={() => setLiked(!liked)}>
    {liked ? <FcLike size={30} color="#ed4956" /> : <FcLike size={30} />}
</button>

完整代码

以下是完整可用的ReactJS代码片段：

import React, { useState } from 'react';
import { FcLike } from 'react-icons/fc';

const InstagramLikeButton = () => {
  const [liked, setLiked] = useState(false);

  return (
    <button onClick={() => setLiked(!liked)}>
      {liked ? <FcLike size={30} color="#ed4956" /> : <FcLike size={30} />}
    </button>
  );
};

export default InstagramLikeButton;

现在尝试单击按钮，您会注意到，按钮状态已更改并且图标已更改为Instagram Like按钮。

结论

在ReactJS中创建Instagram Like按钮非常简单。首先需要安装react-icons，然后引入所需的图标组件，创建并设置一个状态变量，然后添加按钮单击条件来更改状态即可。