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

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

1 个答案: