reactjs - "react-useanimations"属性 'animationKey' 在类型“IntrinsicAttribute”上不存在

Question

我使用了“react-useanimations”插件，当我运行我的项目时显示以下错误。
类型“IntrinsicAttribute ”上不存在属性“animationKey”

common.js->常用函数都写在这里(简单的js文件)

myjob.tsx-> 此页面上使用的实际 getTag 函数( typescript 页面)
//Common.js 文件

import React from "react";
import UseAnimations from "react-useanimations";

export function getTag(tag: any) {
if (tag === 'DL')
return (
 <UseAnimations animationKey="github" size={56} style={{ padding: 100 }} />
);
}

//myjob.tsx

import React, { useState, useEffect } from "react";
import SVG from "react-inlinesvg";
import { Link } from "react-router-dom";
import { Alert, Nav, Tab } from "react-bootstrap";
import { toAbsoluteUrl } from "../../_metronic/_helpers";
import { utcToDate, getTag } from "../../utils/common";
import Icon from '@material-ui/core/Icon';
import { MDBDataTableV5 } from 'mdbreact';
import { Dropdown, Button } from "react-bootstrap";
import { DropdownCustomToggler } from "../../_metronic/_partials/dropdowns";
import Paper from '@material-ui/core/Paper';
import Draggable from 'react-draggable';
import { getUserJobList, deleteJobById } from "../../app/modules/Job/_redux/jobCrud";
import { shallowEqual, useSelector } from "react-redux";
export function MyJobs(props: any) {
const [open, setOpen] = React.useState(false);
const [openSnackbar, setOpenSnackbar] = React.useState(false);
const [deleteJobId, setDeleteJobId] = useState("");
const [key, setKey] = useState("Month");
const [msg, setMsg] = useState("")
const [type, setType] = useState<"success" | "primary" | "secondary" | "danger" | "warning" | "info" | "dark" | "light" | undefined>("success")
const [jpbList, setJpbList] = useState([])
const [displayBy, setDisplayBy] = useState(false)
const [folders, setFolders] = useState()
const user = useSelector((state: any) => state.auth.user, shallowEqual);
const [datatable, setDatatable] = useState({
columns: [
  {
    label: '#',
    field: 'icon',
    width: 150,
    attributes: {
      'aria-controls': 'DataTable',
      'aria-label': 'Name',
    },
  },
  {
    label: 'Job Name',
    field: 'name',
    width: 150,
    attributes: {
      'aria-controls': 'DataTable',
      'aria-label': 'Name',
    },
  },
  {
    label: 'Proccesed Date',
    field: 'createdDttm',
    width: 270,
  },
  {
    label: 'Status',
    field: 'status',
    width: 270,
  },
  {
    label: 'Action',
    field: 'action',
    width: 270,
  },
],
rows: [{}],
});

useEffect(() => {
if (!jpbList.length) {
  getList();
}
}, []);

const getList = async () => {

getUserJobList(user.id)
  .then((res: any) => {
    if (res.status == 200 && res.data) {
      let rows: any = [];
      res.data.map((row: any) => {
        rows.push(
          {
            icon:<img src={row.thumbnail} style={{ maxWidth: '50px', maxHeight: '50px' }} />,
            name: row.name,
            createdDttm: utcToDate(row.createdDttm),
            status: getTag(row.status),
            action: <div style={{ width: '120px' }}>
              {/* begin::Toolbar */}
              <div className="d-flex justify-content-end">
                {
                  row.status == "CO" ?
                    <Link to={`myjobs/markerpage/${row.id}`} className="btn btn-icon btn-sm mx-3">
                      <span className="svg-icon svg-icon-md svg-icon-primary">
                        <Icon className='fa fa-play' color="action" />
                      </span>
                    </Link> : ""
                }
                < Dropdown className="dropdown dropdown-inline" alignRight>
                  <Dropdown.Toggle
                    id="dropdown-toggle-top-user-profile"
                    as={DropdownCustomToggler}
                  >
                    <i className="ki ki-bold-more-hor"></i>
                  </Dropdown.Toggle>
                  <Dropdown.Menu className="dropdown-menu dropdown-menu-sm dropdown-menu-right">
                  </Dropdown.Menu>
                </Dropdown>
              </div>
              {/* end::Toolbar */}</div >,
          }
        )
      });
      let dt: any = [];
      dt.columns = datatable.columns;
      dt.rows = rows;
      setDatatable(dt);
      setJpbList(res.data);
    } else {
      setMsg("Something went wrong please try again later.")
      setType("danger")
    }
  })
  .catch((e: any) => {
    setMsg("Something went wrong please try again later.")
    setType("danger")
  });
 }

return (
<>
   <MDBDataTableV5 hover entriesOptions={[10, 20, 50]} entries={10} pagesAmount={4} data={datatable} searchTop searchBottom={false} />
</>);
}

Answer 1

首先导入您想要的图标。

import UseAnimations from "react-useanimations"; 
import activity from 'react-useanimations/lib/activity' 

在 View 或渲染中使用这样的

<UseAnimations animation={activity} autoplay={true} loop={true} size={20} style={{ paddingLeft: 10 }} />