Question

React.memo可用于控制React函数组件是否应该更新。默认情况下按道具进行比较。现在，我想将一个prop与功能组件内部的ref之一进行比较。更具体地说，这是代码（用打字稿写成）：

interface RichEditorProps {
    value: string;
    onChange: (value: string) => void;
}

export const RichEditor = React.memo((props: RichEditorProps) => {

    const contentEditableDiv = useRef<HTMLDivElement>(null);

    useEffect(() => {
        contentEditableDiv.current!.addEventListener("input", () => {
            props.onChange(contentEditableDiv.current!.innerHTML);
        });
    });

    return (
        <div contentEditable suppressContentEditableWarning ref={contentEditableDiv}>
            {props.value}
        </div>
    )
}, ((prevProps, nextProps) => {
    // I want to do this, but it doesn't work because contentEditableDiv is not available here.
    return nextProps.value !== contentEditableDiv.current!.innerHTML;
}));

如您所见，我想在contentEditableDiv.current!.innerHTML不等于nextProps.value时更新组件，但是我不能这样做，因为那里没有contentEditableDiv。还有其他方法可以将其变成类Component吗？

P.S。实现此目的的一种方法可能是给div一个id并使用document.getElementById来获取compare函数中的div组件。但是我想避免这种方法，因为我不得不考虑一种为它分配唯一ID的方法，但我还没有找到一种简单的方法来实现。我很好奇是否还有其他方法可以做到。

在React.memo中使用ref

0 个答案: