Question

我有一个名为<Visualizer>的React组件，其中内置了一堆WebGL元素。 3D动画，几何形状，纹理，渲染器，画布，WebGL上下文等。

我的项目中有几个页面。着陆后，结构将如下所示：

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

如您所见，它向下嵌套了几层，每个组件都是自己的文件。

当用户导航到选项页面时，需要将<Visualizer>的相同实例附加到其他子组件，因此结构应为：

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

它必须是同一实例的原因是动画需要准确地拾取其在目标页面上的剩余位置，并在新的{{1}中重新启动所有3D几何形状，纹理和材质}上下文效率很低。

我尝试过Portals，但它们仅适用于DOM <canvas>，不适用于React组件。有没有办法将我的HTMLElement的相同实例附加到多个子组件中？

更新：

我尝试导入“预渲染”组件，但每次仍会启动一个新实例：

visualizer.js

<visualizer>

header.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;

但是我的控制台显示，每次页面更改时，// 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>

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”导入Visualizer；

React：有没有办法将一个组件的相同实例附加到两个单独的子组件？

更新：

1 个答案: