找不到模块“react-scroll-to-bottom”的声明文件

Posted 2023-03-13

【中文标题】找不到模块“react-scroll-to-bottom”的声明文件

【英文标题】：Could not find a declaration file for module 'react-scroll-to-bottom'

【发布时间】：2021-01-15 03:24:24

【问题描述】：

我安装了 react-scroll-to-bottom 并通过依赖项显示它，但我不断收到此错误：

。 'c:/Users/J/Desktop/webapps/ChatApp/client/node_modules/react-scroll-to-bottom/lib/index.js' 隐含了一个 'any' 类型。 尝试npm install @types/react-scroll-to-bottom（如果存在）或添加包含declare module 'react-scroll-to-bottom'; 的新声明（.d.ts）文件

这是我的 package.json 文件。

  "name": "client",
  "version": "0.1.0",
  "private": true,
  "dependencies": 
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.5.0",
    "@testing-library/user-event": "^7.2.1",
    "query-string": "^6.13.1",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "react-emoji": "^0.5.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0",
    "react-scripts": "3.4.3",
    "react-scroll-to-bottom": "^4.0.0",
    "socket.io-client": "^2.3.0"
  ,

这是我的js代码：

import React from 'react';

import ScrollToBottom from 'react-scroll-to-bottom';

import Message from './Message/Message'

import './Messages.css';




const Messages = ( messages, name ) => (
    <ScrollToBottom classname="messages">
        messages.map((message, i) => <div key=i><Message message=message name=name /></div>)
    </ScrollToBottom>
);

export default Messages;

【问题讨论】：

签入你的 npm 模块，dependencies 和 devdependencies 只是一个参考。

对不起，我很困惑，这是什么意思？

【参考方案1】：

所以我所做的就是寻找其他实现滚动到底部效果的方法，这就是我使用的：

import React,  useEffect, useRef  from "react";


const Messages = ( messages, name ) => 
    const messagesEndRef = useRef(null);
    const scrollToBottom = () => 
        messagesEndRef.current.scrollIntoView( behavior: "smooth" );
    ;
    useEffect(scrollToBottom, [messages]);

    return (
        <div className="messages">
            messages.map((message, i) => <div key=i><Message message=message name=name /></div>)
            <div ref=messagesEndRef />
        </div>
    );
;

【参考方案2】：

我遇到了同样的问题，来自 JsMastery 的教程 https://github.com/adrianhajdin/project_chat_application

最初我也认为它是一个编译错误，但不是这样的问题。

您指出的消息只是对 react-scroll-to-bottom 内部组合的警告，它不是重大错误，它与 typescript 声明有关。

通过在声明处声明css类来解决

<ScrollToBottom/>

保持这种方式：

<ScrollToBottom  className="messages">

然后滚动到底部将开始工作

警告永远不会消失。

最终代码如下：

const Messages = ( messages, name ) => (
    <ScrollToBottom  className="messages">
        messages.map((message, i) =><div key=i><Message message=message name=name/></div>)
    </ScrollToBottom>
)

一旦设置了 css 声明，行为就固定了

【讨论】：

是因为作者直到大约第二个1:42:12才考虑到这件事