如何在 ReactJS 中创建响应式赞按钮？

React 是一个用于开发交互式用户界面的 JavaScript 库。我们将使用 React JS 制作一个Like 功能。
所需模块：

• npm
• 反应
• 字体真棒

npm install --save @fortawesome/react-fontawesome

基本设置：通过以下命令启动项目：

• NPX ：它是 npm 5.2+ 自带的包运行工具，npx 是易于使用的 CLI 工具。 npx 用于执行 Node 包。它极大地简化了许多事情，其中之一是快速检查/运行节点包，而无需在本地或全局安装它。

npx create-react-app like-app

• 现在转到文件夹

cd like-app

• 启动服务器 - 通过在终端中键入以下命令启动服务器：

npm start

• 现在在 src 中创建一个带有文件名的目录——Like.js

mkdir components && cd components && touch Like.js

目录结构将如下所示：

编辑Like.js如下。

• Like.js：以下是所需的类似功能应用程序的导入。第二个导入是著名的图标库——“ Font-Awesome ”库。

  Javascript

  import React, { Component } from "react";
  import { faHeart } from "@fortawesome/free-solid-svg-icons";
  import { faHeartBroken } from "@fortawesome/free-solid-svg-icons";
  import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

  
  
  
  
  
  

• Like.js：现在让我们定义组件的状态。它包含一个名为like的变量。如果它是假的，那么我们将渲染一个空白的心，但是，如果它是真的，我们将渲染一个坚实的心。

  Javascript

  state = { liked: false };
  

• Like.js： toggle()：这个函数是组件的核心，当心脏被点击时会改变状态。它在空心和实心之间切换心脏的状态。

  Javascript

  toggle = () => {
      let localLiked = this.state.liked;
      localLiked = !localLiked;
      this.setState({ liked: localLiked });
    };
  

• Like.js：这是返回组件 HTML 的主要渲染函数。仔细观察我们如何使用条件渲染来根据like 变量的状态渲染不同的心。

  Javascript

  render() {
      return (
        
  
          
              
  Click on the Like Button
    
            
   this.toggle()}
            >
              {this.state.liked === false ? (
                
              ) : (
                
              )}
            
          
        
      );
    }
  

Like.js：组件的最终代码，可以在任何其他组件中导出和使用。

Javascript

import React, { Component } from "react";
import { faHeart } from "@fortawesome/free-solid-svg-icons";
import { faHeartBroken } from "@fortawesome/free-solid-svg-icons";
  
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
class Like extends Component {
  state = { liked: false };
  toggle = () => {
    let localLiked = this.state.liked;
  
    // Toggle the state variable liked
    localLiked = !localLiked;
    this.setState({ liked: localLiked });
  };
  render() {
    return (
      

        
          
Click on the Like Button
          
 this.toggle()}
          >
            {this.state.liked === false ? (
              
            ) : (
              
            )}
          
        
      
    );
  }
}
  
export default Like;

输出：最终输出看起来像这样。在浏览器中打开http://localhost:3000/ ：