Создать ссылку на не загруженный компонент preact - PullRequest
Новая
       8

Создать ссылку на не загруженный компонент preact

2 голосов
/ 30 сентября 2019

Я пытаюсь изменить какой-либо текст в компоненте preact, основываясь на объекте, который пользователь щелкает в этой сцене threejs . Я использую шаблон Matt DesLauriers для этого приложения, так как я хотел посмотреть, как профессионалы могут это сделать. Это первый раз, когда я использую реагировать (хотя на самом деле это так и есть), а также ThreeJS.

Теоретически мой метод должен работать, за исключением одной проблемы. То, как Matt DesLauriers настроил экран загрузки, означает, что основной компонент пользовательского интерфейса, названный Landing, отображается после завершения загрузки. Это достигается с помощью 

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>

    );
  }

. Мне нужно иметь возможность ссылаться на Landing, чтобы я мог установить его состояние, однако, присвоив ему ref case 'Landing': return <Landing key='Landing' ref={this.ref}/>;, мы получим ссылку на пустой объект. Если я добавлю компонент Landing напрямую, он будет работать точно так, как задумано.

Есть идеи, как это исправить?

Также здесь есть публичное GitHub репо , если хотите.

...