ref 相关问题

ref关键字导致参数通过引用传递，而不是通过值传递。通过引用传递的效果是方法中对参数的任何更改都会反映在调用方法中的基础参数变量中。引用参数的值始终与基础参数变量的值相同。

此参考返回打字稿错误，我不知道如何修复它。该代码可以在本地环境中运行，但在部署过程中出现错误 const [quill, setQuill] = useState 此参考返回打字稿错误，我不知道如何修复它。该代码可以在本地环境中运行，但在部署过程中出现错误 const [quill, setQuill] = useState<any>(null) const wrapperRef = useCallback(async (wrapper: any) => { if (typeof window !== 'undefined') { if (wrapper === null) return wrapper.innerHTML = '' const editor = document.createElement('div') wrapper.append(editor) const Quill = (await import('quill')).default const QuillCursors = (await import('quill-cursors')).default Quill.register('modules/cursors', QuillCursors) const q = new Quill(editor, { theme: 'snow', modules: { toolbar: TOOLBAR_OPTIONS, cursors: { transformOnTextChange: true, }, }, }) setQuill(q) } }, []) <div id="container" className="max-w-[800px]" ref={wrapperRef} /> 这是错误消息 Type (wrapper: any) => Promise<void> is not assignable to type LegacyRef<HTMLDivElement> | undefined. Type (wrapper: any) => Promise<void> is not assignable to type (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly). Type Promise<void> is not assignable to type void | (() => VoidOrUndefinedOnly) 问题是你的wrapperRef函数是一个异步函数，这意味着它返回一个promise。 React 并不期望 ref 回调返回 Promise。相反，它需要一个返回 void（或不返回任何内容）的简单函数。简单来说，你的函数正在做一些 React 在此上下文中无法理解的事情。要解决此问题，您需要确保wrapperRef函数不返回promise。我建议尝试这个： import React, { useState, useCallback } from 'react'; import Quill from 'quill'; import QuillCursors from 'quill-cursors'; const TOOLBAR_OPTIONS = [...]; // define your toolbar options here const MyComponent: React.FC = () => { const [quill, setQuill] = useState<any>(null); const wrapperRef = useCallback((wrapper: HTMLDivElement | null) => { if (typeof window !== 'undefined' && wrapper !== null) { // Create an async function to handle the Quill setup const initializeQuill = async () => { wrapper.innerHTML = ''; const editor = document.createElement('div'); wrapper.append(editor); const Quill = (await import('quill')).default; const QuillCursors = (await import('quill-cursors')).default; Quill.register('modules/cursors', QuillCursors); const q = new Quill(editor, { theme: 'snow', modules: { toolbar: TOOLBAR_OPTIONS, cursors: { transformOnTextChange: true, }, }, }); setQuill(q); }; // Call the async function without awaiting it initializeQuill(); } }, []); return <div id="container" className="max-w-[800px]" ref={wrapperRef} />; }; export default MyComponent;

javascript reactjs typescript next.js ref

回答 1 投票 0

React - 使用 Ref 获取 DOM 元素 TEXT 值

这应该是一个简单的操作，但我在网上不断找到的所有内容都是如何使用反应引用获取“输入值”。我需要知道如何从 DOM 元素获取 TEXT 值，例如你好这应该是一个简单的操作，但我在网上不断找到的所有内容都是如何使用反应引用获取“输入值”。我需要知道如何从 DOM 元素获取 TEXT 值，例如 <p>hello world</p> 并获得“你好世界” 我已正确设置 ref，并且可以使用 refName.current 记录完整的 html 标签。为了获取文本，我尝试了 refName.value、refName.current.value refName.text、refName.current.text()、refName.innerText.. 等有人能指出我正确的方向吗？谢谢。 textContent 优于 innerText: ref?.current?.textContent 您可以通过 ref.current.innerText 访问文本例如（沙箱）： const ref = useRef(); useEffect(() => { console.log(ref.current?.innerText || "ref not set!"); }, []); return <p ref={ref}>Hello world</p>; 请记住，第一次渲染时未设置 ref.current - 因此它一开始是未定义的。

reactjs ref

回答 2 投票 0

Vue3 @/v-on 事件函数如何传递？

&...

javascript events vuejs3 ref

回答 1 投票 0

具有引用依赖关系的 useMemo 和 useEffect 之间的区别

在React中，useEffect和useMemo都有一个dependency参数。我天真地认为它们的工作原理相同：每当依赖项参数中的值发生变化时，我认为 useEffect 或 u...

reactjs ref

回答 1 投票 0

在 React 中将 ref 传递给元素组件*会做什么？

我一直认为 React 中的 ref 是单向引用。换句话说，我想如果我这样做： const SomeComponent = () => { const ref = useRef(); 返回 abc...