React 360中如何通过组件方法按需挂载另一个组件？

要实现这个需求，核心是让Component1能够访问到React 360的实例（ReactInstance），然后在需要的时候调用它的渲染方法来挂载Component2。下面分步骤给你具体实现方案：

步骤1：修改初始化代码，传递React实例给Component1 #

首先，在init函数里，不要一开始就渲染Component2，而是把React 360实例通过props传递给Component1——这种方式更符合React的组件设计原则：

import {ReactInstance} from 'react-360-web';
function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    // 保留你原有的配置项
    fullScreen: true,
    ...options,
  });

  // 渲染Component1时，把r360实例作为props传入
  r360.renderToSurface(
    r360.createRoot('Component1', { r360Instance: r360 }),
    r360.getDefaultSurface()
  );

  // 移除一开始就渲染Component2的代码
}
window.React360 = {init};

步骤2：在Component1中实现挂载逻辑 #

接下来，在Component1的mountNewComponent方法里，通过props拿到React实例，然后调用renderToLocation来挂载Component2。同时可以加个状态判断，避免重复挂载：

import React from 'react';

export default class Component1 extends React.Component {
  constructor(props) {
    super(props);
    // 用状态标记Component2是否已挂载
    this.state = {
      component2Mounted: false
    };
  }

  mountNewComponent() {
    const { r360Instance } = this.props;
    const { component2Mounted } = this.state;

    // 仅当未挂载时执行渲染
    if (!component2Mounted) {
      r360Instance.renderToLocation(
        r360Instance.createRoot('Component2'),
        r360Instance.getDefaultLocation()
      );
      // 更新状态标记已挂载
      this.setState({ component2Mounted: true });
    }
  }

  render() {
    return (
      {/* 示例：用按钮触发挂载动作 */}
      <button onClick={() => this.mountNewComponent()}>点击挂载Component2</button>
    );
  }
}

备选方案：使用全局存储React实例 #

如果你觉得props传递不够方便，也可以把React实例存到全局对象上，操作更直接：

修改init函数：

function init(bundle, parent, options = {}) {
  const r360 = new ReactInstance(bundle, parent, {
    fullScreen: true,
    ...options,
  });

  r360.renderToSurface(
    r360.createRoot('Component1'),
    r360.getDefaultSurface()
  );

  // 把实例存到window全局
  window.r360Instance = r360;
}

然后在Component1里直接调用全局实例：

mountNewComponent() {
  if (!this.state.component2Mounted) {
    window.r360Instance.renderToLocation(
      window.r360Instance.createRoot('Component2'),
      window.r360Instance.getDefaultLocation()
    );
    this.setState({ component2Mounted: true });
  }
}

两种方案都能实现你的需求，props传递更符合React组件设计规范，全局存储则更简单直接，你可以根据项目情况选择。

内容的提问来源于stack exchange，提问作者bear