Реагируйте: Есть ли способ добавить один и тот же экземпляр компонента в два отдельных дочерних компонента?

Question

У меня есть компонент React с именем <Visualizer>, в который встроено несколько элементов WebGL.3D-анимация, геометрия, текстуры, рендер, холст, контекст WebGL и т. Д.

В моем проекте несколько страниц.После приземления структура будет выглядеть примерно так:

<LandingPage>
  <...>
    <Header>
        <Visualizer />
    </Header>
  <...>
</LandingPage>

Как видите, она вложена на несколько уровней вниз, и каждый компонент представляет собой свой собственный файл.

Когда пользователь переходит на страницу параметров, тот же экземпляр из <Visualizer> должен быть добавлен к другому дочернему компоненту, поэтому структура будет иметь вид:

<OptionsPage>
  <...>
    <Main>
        {/*Must be same instance, not a new one*/}
        <Visualizer />
    </Main>
  <...>
</OptionsPage>

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

Я пробовал Порталы , но они работают только с DOM HTMLElement, а не с компонентом React.Есть ли способ добавить один и тот же экземпляр моего <visualizer> в несколько дочерних компонентов?

---

Обновление:

Я попытался импортировать «предварительно обработанный» компонент,но он по-прежнему каждый раз запускает новый экземпляр:

visualizer.js

class Visualizer extends React.Component {
    constructor() {
        super(props);
        console.log("New instance");
    }

    render() {
        return(
            <canvas />
        );
    }
}

// "Pre-render" component
const viz = <Visualizer />;

// export pre-rendered version
export default viz;

header.js

// Import
import viz from './visualizer.js';

class Header extends React.Component {
    // Should be using the same intance rendered above
    // ...but instead it initiates a new one
    render() {
        return(
            <div>
                {viz}
            </div>
        );
    }
}

Но моя консоль показывает, что <Visualizer> запускается с нуля при каждом изменении страницы:

 New instance
 New instance
 New instance

Answer 1

Вы должны инициализировать переменную с помощью общего компонента, например:

const visualizer = <Visualizer />

, а затем используйте его на своих страницах как:

<LandingPage>
    <Header>
        {visualizer}
    </Header>
</LandingPage>

<OptionsPage>
    <Main>
        {visualizer}
    </Main>
</OptionsPage>

Чтобы экспортировать экземпляр и импортировать его в другие файлы, вы должны сделать:

Экспорт ('visualizer.js'):

const visualizer = <Visualizer />;
export default visualizer;

Импорт в нужные файлы:

импорт визуализатора из 'visualizer.js`;