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

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

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

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

componentDidLoad() {
    this.forceUpdate();
}

效果是一样的，只是如果 canvas 被重新定义，你的组件将不会重新渲染。

当然，color-picker 组件需要与 null canvas 配合使用。

Answer 2

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

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

StencilJS JSX 使用 ref 作为 Prop

StencilJS JSX use ref in as a Prop

ref

jsx

stenciljs