javascript - 使用 hyper.Component 时访问 DOM

Question

当使用HyperHTMLElement时只需使用 this.children 或 this.querySelector() 即可访问组件的内容，因为它是一个元素。

但是使用 hyper.Component 时如何实现类似的行为？

我想到的假设示例来自 React 文档:https://facebook.github.io/react/docs/refs-and-the-dom.html - 我想将焦点集中在 DOM 内的特定节点。

我有一个 codepen 沙箱，我正在尝试解决这个问题:https://codepen.io/asapach/pen/oGvdBd?editors=0010

这个想法是 render() 每次都会返回相同的 Node，因此我可以在返回之前保存它，并在以后以 this.node< 的形式访问它:

render() {
  this.node = this.html`
    <div>
      <input type="text" />
      <input type="button" value="Focus the text input" onclick=${this} />
    </div>
  `;
  return this.node;
}

但这对我来说看起来不太干净。有更好的方法吗？

Answer 1

handleEvent 模式可以为您提供帮助。该模式背后的想法是，当行为是事件驱动时，您永远不需要保留 DOM 引用，因为您始终可以通过 event.currentTarget 检索节点，始终指向具有监听器的元素Attached 或 event.target，也适用于在附加到包装元素的通用点击处理程序中发生在其他位置的点击，在您的演示案例中为 div 。

如果您想使用这些信息，您可以使用属性来丰富您的组件来识别它们，例如根元素上的 data-is="custom-text-input" 可以是，并用它来做您需要的任何其他事情。

onclick(e) {
  var node = e.target.closest('[data-is=custom-text-input]');
  node.querySelector('[type=text]').focus();
}

您可以在代码笔的分支中看到一个工作示例: https://codepen.io/WebReflection/pen/RLNyjy?editors=0010

作为替代方案，您可以渲染组件并一次寻址其内容，如另一个分支所示: https://codepen.io/WebReflection/pen/LzEmgO?editors=0010

  constructor() {
    super().node = this.render();  
  }

归根结底，如果您不使用自定义元素，而只是使用基本的、优秀的 DOM 节点，您可以随时初始化/渲染它们，无需等待任何升级机制。

这里既美好又希望安全的是，除非您显式公开它，否则无法解决/更改/变异与 DOM 元素相关的实例。

我希望这些可能性能够回答您的问题。