Трафарет JS JSX использовать ссылку в качестве проп - PullRequest
Новая
       53

Трафарет JS JSX использовать ссылку в качестве проп

1 голос
/ 14 января 2020

В настоящее время я пишу компонент Stencil JS с ref для элемента, который мне нужно передать как @Prop другому элементу. Например: 

<canvas ref={el => this.canvas = el}></canvas>
<color-picker canvas={this.canvas}></color-picker>

Когда создатель палитры цветов создан, this.canvas все еще не определен, что приводит к ошибке в color-picker.

Как я могу сделать это в JSX?

Ответы [ 2 ]

1 голос
/ 16 января 2020

Как уже упоминалось в другом ответе, ваша ссылка создается только после первого рендеринга, когда становится доступным фактический экземпляр вашего элемента, на который может указывать ссылка.

Самый простой способ решить эту проблему для вам следует пометить элемент canvas как состояние с помощью декоратора @State() (который вызовет повторную визуализацию, если его ссылка изменится), а затем условно отобразить <color-picker /> только при наличии действительной ссылки: 

import { h, Component, Host, State } from '@stencil/core';

@Component({ tag: 'my-component' })
export class MyComponent {
  @State() canvas?: HTMLCanvasElement;

  render() {
    return (
      <Host>
        <canvas ref={el => this.canvas = el} />
        {this.canvas && <color-picker canvas={this.canvas} />}
      </Host>
    );
  }
}
1 голос
/ 15 января 2020

this.canvas является ссылкой на элемент DOM, поэтому он может иметь значение только после первоначального рендеринга.

Если вы зададите свойство canvas * @State(), ваш компонент будет повторно визуализироваться после он определен (или изменен), который передаст его в color-picker.

. Или вы можете вручную перерисовать ваш компонент после его первой загрузки: 

componentDidLoad() {
    this.forceUpdate();
}

Эффект будет будет таким же, за исключением того, что ваш компонент не будет перерисовываться, если canvas будет переопределен.

Конечно, компонент color-picker должен работать с null canvas.

...