#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
? Возможно, вы захотите использовать awrapper component
в этом случае, если вы не хотите устанавливать ссылку каждый раз, когда вам нужно использовать свой RichEditor.