使用 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() returns 每次都相同 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

这是我过去通过 https://github.com/joshgillies/hypercomponent

所做的事情

实现实际上很简单。

class ElementalComponent extends hyper.Component {
  constructor () {
    super()
    const _html = super.html
    this.html = (...args) => {
      this.node = _html.apply(this, args)
      return this.node
    }
  }
}

class HelloWorld extends ElementalComponent {
  render () {
    return this.html`<div>Hello World!</div>`
  }
}

这非常有效并且符合您的问题。但是，值得注意的是 hyperHTML 不仅可以渲染单个节点，还可以渲染多个节点。例如：

hyper`<div>Hello World!</div>` // returns a single DOM Node
hyper`<div>Hello</div> <div>World!</div>` // returns multiple DOM Nodes as an Array.

所以上面 ElementalComponent 中的 this.node 可以是 DOM 节点，也可以是数组，具体取决于渲染器正在做什么。

Answer 2

handleEvent 模式可以帮助您。该模式背后的想法是，当行为是事件驱动时，您永远不需要保留 DOM 引用，因为您始终可以通过 event.currentTarget 检索节点，始终指向附加了侦听器的元素，或 event.target，也适用于在附加到 wrap 元素的通用点击处理程序中发生在其他地方的点击，在您的演示案例中是 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 节点，您可以随时初始化/渲染它们，无需等待对于任何升级机制。

这里既好又希望安全的是，除非您明确公开它，否则没有办法 address/change/mutate 与 DOM 元素相关的实例。

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

使用 hyper.Component 时访问 DOM

Access DOM when using hyper.Component

javascript

hyperhtml