reactjs - 找不到模块 'react-reveal/Fade' 的声明文件

Question

我想在我的 React 项目中使用 react-reveal 包。我安装了它。但是react找不到模块

找不到模块“react-reveal/Fade”的声明文件。

但是 react-reveal 显示在 package.json 文件和节点模块中。

"dependencies": {
    "@testing-library/jest-dom": "^5.14.1",
    "@testing-library/react": "^11.2.7",
    "@testing-library/user-event": "^12.8.3",
    "bootstrap": "^4.6.0",
    "jquery": "^3.6.0",
    "react": "^17.0.2",
    "react-bootstrap": "^1.6.1",
    "react-dom": "^17.0.2",
    "react-parallax": "^3.3.0",
    "react-reveal": "^1.2.2",
    "react-router-bootstrap": "^0.25.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "4.0.3",
    "react-scroll": "^1.8.2",
    "react-water-wave": "^1.0.5",
    "web-vitals": "^1.1.2"
  },

我尝试安装 npm i --save-dev @types/react-reveal。

然后这个错误就来了

'@types/react-reveal@latest' 不在 npm 注册表中。

我该如何解决这个问题？

注意:我没有使用 typescript

Answer 1

使用require导入包

import "./Product.scss"
//use require to import the module
const Fade = require("react-reveal/Fade")

export interface IProduct {
    price: number
    title: string
    img: string
}
const Product: React.FC<IProduct> = ({ price, title, img }) => {
    return (
        <Fade bottom cascade>
            <li className="product-wrapper">
                <div className="product-container">
                    <img src={`${img}`} alt="" />
                    <div className="main-details">
                        <div className="title">{title}</div>
                        <div className="details">
                            <div className="price">Price: $ {price}</div>
                            <div className="button-wrapper">
                                <button className="button btn-primary">
                                    Add to cart
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </li>
        </Fade>
    )
}

export default Product

尝试了这个实现，它成功了