相关疑难解决方法(0)

我有一个弹出列表,其中div包含一个子列表的垂直列表div.我添加了向上/向下键盘导航以更改当前突出显示的子项.

现在,如果我按下向下键足够多次,突出显示的项目将不再可见.如果滚动视图,则向上键也会出现同样的情况.

React自动将子项滚动div到视图中的正确方法是什么？

在我的组件中，我有以下代码可以滚动到页面底部：

const el = useRef(null);

useEffect(() => {
    if (el.current === null) { }
    else
        el!.current!.scrollIntoView({ block: 'end', behavior: 'smooth' });

    if (props.loading != true)
        props.fetchFeedbackTaskPageData(submissionId);

}, [])

这个elref 附加到一个 div（在页面底部），如下所示：

<div id={'el'} ref={el}></div>

但是，我收到以下错误：

“从不”类型上不存在属性“scrollIntoView”。TS2339

当我不使用时!，我收到此错误：

对象可能为“空”。TS2531

我检查了很多关于这个问题的帖子，但没有看到如何在使用useRefand时在 react 中处理这个问题scrollIntoView。有任何想法吗？

我是React-Testing-Library / Jest的新手，它试图编写测试以查看路由导航（使用react-router-dom）是否正确执行。到目前为止，我一直在关注README和本教程的用法。

我的组件之一在局部函数中使用了scrollIntoView，这导致测试失败。

TypeError: this.messagesEnd.scrollIntoView is not a function

  45 |
  46 |     scrollToBottom = () => {
> 47 |         this.messagesEnd.scrollIntoView({ behavior: "smooth" });
     |                          ^
  48 |     }
  49 |
  50 | 

这是我的chatbot组件中的功能：

componentDidUpdate() {
    this.scrollToBottom();
}

scrollToBottom = () => {
    this.messagesEnd.scrollIntoView({ behavior: "smooth" });
}

这是测试失败的示例：

test('<App> default screen', () => {

    const { getByTestId, getByText } = renderWithRouter(<App />)

    expect(getByTestId('index'))

    const leftClick = {button: 0}
    fireEvent.click(getByText('View Chatbot'), leftClick) <-- test …

我有这样的代码，我在单击按钮滚动到页面底部时调用它：

const el = useRef<HTMLDivElement>(null);

const ScrollToBottom = () => {
    if (el.current !== null)
        el!.current!.scrollIntoView({ block: 'end', behavior: 'smooth' });
}

这可以帮助我滚动到具有引用的元素el，例如：

<div id={'el'} ref={el}></div>

但是，我想滚动到最后添加或更新的元素，该元素不一定始终位于页面末尾。以我现在使用的方法，我认为这是不可能的。这是因为我需要ref={el}从其他 dom 元素中删除所有可能的属性，并将其添加到最近添加的动态组件中。我不知道这是否可能。

我想知道是否有办法实现这一目标？

看来我发现了一个 chrome bug。

工作演示就在这里。如果您尝试滚动列表，您最终会看到空格而不是列表项。在 Safari 中未观察到此问题（列表末尾的填充损坏除外）。

要重现该问题，请<div/>使用overflow: scroll和flex-direction: row-reverse或column-reverse作为容器创建并用任何类型的项目填充它。完整代码在这里

有谁知道如何解决这个问题？

当我发送文本时，我希望聊天窗口向下滚动。

实际上发送的消息不会触发滚动，因此它们是隐藏的。

这是一个示例（我使用的是MS Fluent UI for React 库的聊天组件 ）

我找到了这篇文章，但我无法整合它（不知道在哪里声明了 endMessage ）在我的情况下它的价值是undefined.

import React from "react";
import { Avatar, Chat, Divider, Input } from "@fluentui/react-northstar";
import { AcceptIcon } from "@fluentui/react-icons-northstar";

const janeAvatar = {
  image: "public/images/avatar/small/ade.jpg",
  status: {
    color: "green",
    icon: <AcceptIcon />
  }
};

const ChatExample = () => {
  const items = [
    {
      message: (
        <Chat.Message
          content="Hello"
          author="John Doe"
          timestamp="Yesterday, 10:15 PM"
          mine
        />
      ),
      contentPosition: "end",
      attached: …