jsx - 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成员(member)国 @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>
    );
  }
}