ToB企服应用市场:ToB评测及商务社交产业平台

标题: react 18中，利用useRef 获取其他组件的dom并操作节点，flushSync强制同步 [打印本页]

---

作者: 反转基因福娃    时间: 2024-7-18 18:53
标题: react 18中，利用useRef 获取其他组件的dom并操作节点，flushSync强制同步
React 不答应组件访问其他组件的 DOM 节点。乃至自己的子组件也不行！这是故意的。Refs 是一种脱围机制，应该谨慎利用。手动操作 另一个 组件的 DOM 节点会使你的代码更加脆弱。
    相反，想要 暴露其 DOM 节点的组件必须选择该行为。一个组件可以指定将它的 ref “转发”给一个子组件。

1. import { forwardRef, useRef } from 'react';
3. const MyInput = forwardRef((props, ref) => {
4.   return <input {...props} ref={ref} />;
5. });
7. export default function Form() {
8.   const inputRef = useRef(null);
10.   function handleClick() {
11.     inputRef.current.focus();
12.   }
14.   return (
15.     <>
16.       <MyInput ref={inputRef} />
17.       <button onClick={handleClick}>
18.         聚焦输入框
19.       </button>
20.     </>
21.   );
22. }

复制代码

flushSync 强制 React 同步更新

1. import { useState, useRef } from 'react';
2. import { flushSync } from 'react-dom';
4. export default function TodoList() {
5.   const listRef = useRef(null);
6.   const [text, setText] = useState('');
7.   const [todos, setTodos] = useState(
8.     initialTodos
9.   );
11.   function handleAdd() {
12.     const newTodo = { id: nextId++, text: text };
13.     flushSync(() => {
14.       setText('');
15.       setTodos([ ...todos, newTodo]);      
16.     });
17.     listRef.current.lastChild.scrollIntoView({
18.       behavior: 'smooth',
19.       block: 'nearest'
20.     });
21.   }
23.   return (
24.     <>
25.       <button onClick={handleAdd}>
26.         添加
27.       </button>
28.       <input
29.         value={text}
30.         onChange={e => setText(e.target.value)}
31.       />
32.       <ul ref={listRef}>
33.         {todos.map(todo => (
34.           <li key={todo.id}>{todo.text}</li>
35.         ))}
36.       </ul>
37.     </>
38.   );
39. }
41. let nextId = 0;
42. let initialTodos = [];
43. for (let i = 0; i < 20; i++) {
44.   initialTodos.push({
45.     id: nextId++,
46.     text: '待办 #' + (i + 1)
47.   });
48. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

---

欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/)

Powered by Discuz! X3.4