Использовать ссылку внутри React.memo

#javascript #reactjs

#javascript #reactjs

Вопрос:

React.memo может использоваться для управления тем, должен ли компонент функции React обновляться или нет. По умолчанию он сравнивает по реквизитам. Теперь я хочу сравнить prop с одной из ссылок внутри функционального компонента. Чтобы быть более конкретным, вот код (написанный на Typescript):

 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 что он там недоступен. Есть ли какой-либо другой способ добиться этого, не превращая его в компонент класса?

PS Одним из способов добиться этого может быть присвоение div идентификатора и использование document.getElementById для захвата div компонента внутри функции сравнения. Но я хочу избежать этого подхода, поскольку таким образом мне нужно придумать способ присвоить ему уникальный идентификатор, я не нашел простого способа сделать это. И мне любопытно, есть ли какой-либо другой способ сделать это.

Комментарии:

1. Почему вы хотите использовать React.memo в первую очередь? Сравните его с «текущим» значением (перед повторным использованием), используя prevProps.value no?

2. @gpichot prevProps.value не равно contentEditableDiv.current!.innerHTML . Например, сначала div пуст, затем пользователь вводит букву A . В этом случае prevProps.value пусто, nextProps.value есть A , contentEditableDiv.current!.innerHTML есть A . Поскольку nextProps.value равно contentEditableDiv.current!.innerHTML , я не хочу обновлять этот компонент в этом случае. Я не могу этого сделать prevProps.value .

3. Вы не ответили на мой первый вопрос, который я считаю самым важным. Вы пытались использовать React.forwardRef ? Возможно, вы захотите использовать a wrapper component в этом случае, если вы не хотите устанавливать ссылку каждый раз, когда вам нужно использовать свой RichEditor.