Как дублировать компонент при сохранении состояния?

Question

У меня есть компонент с state это обновляется в результате некоторых асинхронных операций. Этот компонент является частью некоторого пользовательского интерфейса перетаскивания, когда пользователь начинает операцию перетаскивания, мне нужно отобразить этот компонент в отдельной части приложения, которая отвечает за отображение перетаскиваемого элемента.

Проблема состоит в том, что если я рендерить компонент заново в другом месте, даже если я пропущу те же реквизиты, ему все равно придется выполнить асинхронные операции, прежде чем он сможет рендерить компонент из того же состояния, что и источник перетаскивания.

Я думал, что смогу заставить это работать, сделав что-то вроде этого - метод рендеринга компонента, ссылающегося на источник перетаскивания:

render() {
    return (
        <DragSourceComponent ref={this.dragSourceComponentRef} />
    )
}

И другой метод рендеринга компонента, отвечающий за рендеринг компонента предварительного просмотра перетаскивания:

renderDragPreview(dragSourceComponentRef) {
    return React.cloneElement(dragSourceComponentRef.current)
}

Однако это не работает, потому что dragSourceComponentRef.current не считается действительным элементом React, и даже если бы это было так, я не думаю, React.cloneElement копирует состояние компонента (документация не ясна по этому вопросу).

Все это в виду, какие еще варианты у меня есть? Можно ли сказать, предварительно установить состояние компонента перед его визуализацией в первый раз? Если бы это было так, я мог бы визуализировать компонент предварительного просмотра перетаскивания с теми же параметрами и клонированным состоянием, чтобы он выглядел точно так же, как исходный элемент перетаскивания. Любые другие идеи / советы приветствуются!

Answer 1

Вам просто нужно поделиться состоянием с несколькими похожими компонентами, а не копировать состояние компонентов-братьев в скопированный. У вас есть два варианта:

1. Переместите состояния DragSourceComponent в его родительские компоненты и получите их через props;
2. Переместите состояния DragSourceComponent в контекст и получите их через перехватчик React.useContext() в любом месте, где хотите.