React16 кнопка Like / DisLike вместе со счетчиком

Question

Я новичок в Reactjs (V16). У меня есть несколько вопросов, как достичь кнопки «Мне нравится» и «Не нравится» вместе со счетчиком. Кто-нибудь, пожалуйста, помогите мне.

Answer 1

Здесь, в stackoverflow, обычно мы ожидаем, что вы пытались и с какой проблемой вы столкнулись.

Но я сделал для вас пример. https://codesandbox.io/s/late-sea-st1qm

Я использовал потрясающие иконки: (для работы требуется 3 пакета, но вы можете использовать любую библиотеку иконок) https://github.com/FortAwesome/react-fontawesome

Post.js (здесь у нас есть кнопки thumbsUp и thumbsDownи отображать данные,

import React from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faThumbsUp, faThumbsDown } from "@fortawesome/free-solid-svg-icons";
import "./Post.css";

export default function Post({ post, like, dislike }) {
  return (
    <div className="flexcontainer">
      <FontAwesomeIcon
        icon={faThumbsUp}
        style={{ cursor: "pointer" }}
        onClick={() => like(post.id)}
      />
      {post.likeCount} - {post.text}
      <FontAwesomeIcon
        icon={faThumbsDown}
        style={{ cursor: "pointer" }}
        onClick={() => dislike(post.id)}
      />
      <hr />
    </div>
  );
}

App.js (управление состоянием и состоянием хранится в App.js). Если вы не знаете, что реагирует, используйте useState, посмотрите документацию по реакции.

import React, { useState } from "react";
import ReactDOM from "react-dom";
import Post from "./Post";

const initialPosts = [
  { id: 1, text: "Post 1", likeCount: 0 },
  { id: 2, text: "Post 2", likeCount: 0 },
  { id: 3, text: "Post 3", likeCount: 0 }
];

function App() {
  const [posts, setPosts] = useState(initialPosts);

  const like = id => {

    const updatedPosts = posts.map(post => {
      if (post.id === id) {
        return { ...post, likeCount: post.likeCount +1 };
      } else {
        return post;
      }
    });
    setPosts(updatedPosts);
  };

  const dislike = id => {
    const updatedPosts = posts.map(post => {
      if (post.id === id) {
        return { ...post, likeCount: post.likeCount -1 };
      } else {
        return post;
      }
    });

    setPosts(updatedPosts);
  };

  return (
    <div className="App">
      {posts.map(post => (
        <Post key={post.id} post={post} like={like} dislike={dislike} />
      ))}
    </div>
  );
}