React 360 从组件渲染到位置

Question

我的样板中有两个组件，其中一个只有在从另一个组件调用方法时才想挂载。

我该怎么做？

这是我的样板：

import {ReactInstance} from 'react-360-web';
function init(bundle, parent, options = {}) {
...
// Render 1
r360.renderToSurface(
r360.createRoot('Component1'),
r360.getDefaultSurface()
);
//I WOULD LIKE TO MOUNT THIS COMPONENT LATER!
r360.renderToLocation(
r360.createRoot('Component2'),
r360.getDefaultLocation(),
);
}
window.React360 = {init};

这是我的组件：

export default class Component1 extends React.Component {
constructor(props) {
super(props)
}
mountNewComponent() {
//HOW TO MOUNT COMPONENT2 FROM HERE??
}
..
}

Answer 1

client.js：

function init(bundle, parent, options = {}) {
...
r360.runtime.executor._worker.addEventListener('message', (e) => onMessage(e, r360));
}
function onMessage(e, r360) {
if(e.data.type === 'newComponent') {
//TODO mount hier
}
}

在组件中：

mountNewComponent() {    
postMessage({ type: "newComponent"});
}