StencilJS JSX使用ref in作为属性

Question

我目前正在为一个元素编写一个带有ref的StencilJS组件，我需要将它作为@Prop传递给另一个元素。如下所示：

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

创建颜色选择器时，this.canvas仍未定义，从而导致color-picker中出现错误。

我如何在JSX中做到这一点？

Answer 1

正如在另一个答案中已经提到的，只有当引用可以指向的元素的实际实例变为可用时，才会在第一次呈现之后创建引用。

为您解决此问题的最简单方法是使用@State()装饰器将canvas成员标记为状态(如果其引用发生更改，将触发重新呈现)，然后仅当有效引用可用时才有条件地呈现<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>
    );
  }
}

Answer 2

this.canvas是对DOM元素的引用，因此它只能在初始呈现之后有一个值。

如果您将canvas设置为@State()属性，则组件将在定义(或更改)后重新呈现，这会将其传递给color-picker。

或者，您可以在首次加载组件后手动重新呈现组件：

componentDidLoad() {
    this.forceUpdate();
}

效果将是相同的，只是如果canvas被重新定义，您的组件将不会重新呈现。

当然，color-picker组件需要使用null画布。