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

Question

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

找不到模块“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;

Answer 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>
    );
};

Answer 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 声明，行为就固定了