StencilJS JSX 使用 ref 作为 Prop

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

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

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