import React, { useState, useEffect, useRef } from "react";
import ReactDOM from "react-dom";

import "./styles.css";

function App() {
  const [minus, setMinus] = useState(1);
  const ref = useRef(null);

  const handleClick = () => {
    setMinus(minus - 1);
  };

  console.log("-->", ref.current, minus);

  useEffect(() => {
    console.log(`denp[minus]>`, ref.current);
  }, [minus]);

  return (
    <div className="App">
      {(minus >= 0 || minus <= -5) && <h1 ref={ref}>num: {minus}</h1>}
      <button onClick={handleClick}>minus</button>
    </div>
  );
}

export default App;

在官方文档中，它说“每当该节点发生变化时，React 都会将其 .current 属性设置为相应的 DOM 节点。”

所以在 React 渲染 DOM …

我有一个实用函数来在引用中存储不断变化的值：

export function useRefOf<T>(value: T) {
  const ref = useRef(value);

  useEffect(() => {
    ref.current = value;
  }, [value]);

  return ref;
}

但是，当我在效果中使用它时，我不想在值更改时重新渲染：

const someValueRef = useRefOf(someValue);

useEffect(() => {
  doSomeGreatStuff(someValueRef.current);
}, [doSomeGreatStuff])

我违反了 ESLintexhaustive-deps规则：

React Hook useEffect has a missing dependency: 'someValueRef'. Either include it or remove the dependency array

我知道如果我使用常规的useRef而不是我的useRefOf，ESLint 不会抱怨。

useRefOf我如何告诉 ESLint像引用一样对待useRef并容忍它不在依赖数组中？

问题

单击该按钮时，将跳过参考当前值的输出。请参阅下面的输出以供参考。但是，如果toggle.current = current + 1位于 useState 回调之外，则它会相应地工作。

代码

import "./styles.css";
import { useState, useRef } from "react";

export default function App() {
  const [array, setArray] = useState(["a"]);
  const toggle = useRef(1);

  const handleChange = () => {
    setArray((a) => {
      let current = toggle.current;
      console.log(current);
      toggle.current = current + 1;
      return [...a, "a"];
    });
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button onClick={() => handleChange()}>hi</button>
    </div>
  );
}

所需输出

1 …

我正在尝试选择使用 useRef 挂钩选择的 DOM 中另一个元素内部的元素。

const editorRef = useRef(null);

在 useEffect 挂钩内部，我尝试选择 editorRef 上的子元素

useEffect(() => {
   editorRef.current.querySelector(".ql-editor").innerHTML = post.content; 
}, []);

但我得到一个

类型错误：“无法将属性‘innerHTML’设置为 null”

但是当我在第一次刷新后保存代码时，它实际上起作用并且innerHTML被填充。

我使用作为当前滚动值的 ref 在我的组件中管理滚动。我不能使用 state 和 setState，因为当用户滚动时 setState 方法会让事情变得非常不稳定和不可能。因此，我决定使用不重新渲染组件的引用，而是在组件重新渲染时保存该值。我的问题是我无法为 ref 设置初始值。当我使用类组件时，我不能使用允许轻松设置初始值的简单 useRef 反应钩子......相反，我使用 React.createRef() 但是当我将值放在括号 () 中时，它不会似乎注册它并且在用户滚动之前是未定义的。我该如何解决？

在这里，当组件更新时（例如，当发送一条新消息时），我想确保只有当用户没有在上方某处浏览旧消息时，它才会向下滚动到最新消息。

我有一个输入标签，当我按下转义键时，我希望输入元素上的焦点消失，这意味着不再有文本光标或任何焦点样式（当用户输入时，他们的输入不会进入输入标签）。

下面的代码是我尝试实现上述功能的尝试，但它没有按预期工作。我想让这段代码按预期工作。

import React, { useRef } from 'react';

const onEscape = function (action) {
    window && window.addEventListener('keydown', (e) => {
        if (e.key === "Escape") {
            action();
        };
    });
};

const MyComponent = () => {

    ...

    const descRef = useRef();
    onEscape(() => {
        descRef.blur();
    });

    return (
        <div>                
            <input
                ref={descRef}
                ...
            />
        </div>
   );
};

我已经测试了该onEscape函数，并且在将其他操作传递给它时它可以工作（当用户按下转义键时，它会执行传递给 onEscape 函数的任何函数）

tl;dr - 如何通过跟踪强制重新渲染仅一个特定的子组件ref？

我有一个行表。我希望能够将鼠标悬停在行上并显示/隐藏行中的单元格，但只能在一段时间之后。

您只能在将鼠标悬停在整个表格上一段时间后（由onMouseEnter和触发）才能显示隐藏的悬停内容onMouseLeave。

一旦将鼠标悬停在特定的 上<Row>，如果父级允许，它应该显示额外的内容。

鼠标悬停在表格上的顺序：

1. 将鼠标悬停在行上
2. 行isHovered现在是true
3. 在 1000ms 内，allowHover更改为true
4. 由于allowHover和isHovered都是true，显示额外的行内容

鼠标移出表格的顺序：

1. 鼠标移动到父容器/表/行之外
2. 之前悬停的行isHovered设置为false
3. 先前悬停的行的隐藏内容被隐藏
4. 在 1000ms 内，allowHover更改为false

此时，如果重新进入表，我们必须再次等待1秒才为allowHover真。一旦 和 都isHovered为allowHover真，则显示隐藏内容。一旦允许悬停，就不会有任何延迟：悬停在其上的行应立即显示隐藏的内容。

我试图useRef避免改变行父行的状态并导致所有子行的重新渲染

在行级别，悬停时，行应该能够检查是否允许悬停，而无需使用 props 重新渲染整个列表。我假设useEffect可以设置为跟踪该值，但它似乎不会在单个组件级别触发重新渲染。

换句话说，预期的行为是当前悬停在行上的行检测父级中的更改，并且仅重新渲染自身以显示内容。然后，一旦允许悬停，行为就很简单。将鼠标悬停在行上？揭示其内容。

以下是涉及的代码片段：

function Table() {
  const allowHover = useRef(false);

  const onMouseEnter = (e) => …