找不到模块“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声明，行为就会被修复