npmcomment/src/components/Editor/Emoji.js

import React from "react";
import { Carousel } from "antd";
import emoji, { prefixUrl } from "../../emoji";
import "./Emoji.css";
// 每页 20  5*4
// 共 20 * 3 = 60 (实际是 54)

// class Emoji

const Emoji = ({ onClick }) => {
  const content = [];
  let curPage = [];
  for (let i = 0; i < 115; i++) {
    if (curPage.length < 20) {
      curPage.push(emoji[i]);
    } else {
      content.push(curPage);
      curPage = [];
    }
  }
  if (curPage.length > 0) {
    content.push(curPage);
  }
  return (
    <Carousel>
      {content.map((page, index) => (
        <div key={index} className="emoji">
          {page.map((item, index) => (
            <div className="item" key={item.value}>
              <span className="helper" />
              <img
                src={`${prefixUrl}${item.value}.${item.ext}`}
                alt={item.title}
                style={{ display: "inline-block" }}
                onClick={() => onClick(item.title)}
              />
            </div>
          ))}
        </div>
      ))}
    </Carousel>
  );
};

export default Emoji;