StencilJS JSX使用ref作为道具

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

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

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

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

componentDidLoad() {
    this.forceUpdate();
}

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

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

Answer 2

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

为您解决此问题的最简单方法是使用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>
    );
  }
}