Javascript 创建对未加载的预作用组件的引用

我正在尝试根据用户在此单击的对象更改preact组件中的一些文本。我正在使用这个应用程序，因为我想看看专业人士会怎么做。这是我第一次使用react（尽管它实际上是preact）和threeJS

理论上，除了一个问题，我的方法应该有效。Matt DesLauriers设置加载屏幕的方式意味着在加载完成后呈现名为Landing的主UI组件。这是通过

getContent (section) {
    // You are probably better off using a real "Router" for history push etc.
    // NB: Ensure there is a 'key' attribute so transition group can create animations
    switch (section) {
      case 'Preloader': return <Preloader key='Preloader' />;

      default:
      case 'Landing': return <Landing key='Landing'/>;
    }
  }

  render () {
    const classes = classnames({
      'App': true
    });

    const section = this.state.section;
    const content = this.getContent(section);

    // Render the WebGL if loaded
    // And also render the current UI section on top, with transitions
    return (
      <div className={classes} ref={ c => { this.container = c; } }>
        { this.state.isLoaded && <WebGLCanvas />}

        <PreactTransitionGroup className='content' >
          { content }
        </PreactTransitionGroup>

      </div>

    );
  }

getContent（部分）{
//你最好使用一个真正的“路由器”进行历史推送等。
//注意：确保有“关键点”属性，以便过渡组可以创建动画
道岔（区段）{
案例“预加载”：返回；
违约：
案例“着陆”：返回；
}
}
渲染（）{
常量类=类名({
“应用程序”：true
});
const section=this.state.section；
const content=this.getContent（节）；
//如果已加载，则渲染WebGL
//并在顶部呈现当前UI部分，带有过渡
返回(
{this.container=c；}}>
{this.state.isLoaded&&}
{content}
);
}

我需要能够引用Landing，这样我就可以设置它的状态，但是给它一个ref

case'Landing:return导致对空对象的引用。如果我直接把着陆部件放进去，它会完全按照预期工作

你知道怎么解决这个问题吗

如果您愿意，这里还有一个。ref在每次渲染时都会更新，它应该在加载时为您提供一个空对象，但在加载完成后返回预期的对象。如果这种情况没有发生，那么一定是出了什么问题。你能在codesandbox.io中提供一个这个问题的例子吗？“这样我们可以帮助你。”里卡多洛佩斯我会试试，但我不确定我是否能够从头开始复制这种复杂的情况。如果你想成为我的githubrepo@RicardoLopes，我无法成功地使某些可编辑的联机工作。还有其他想法吗？