0

使用时，只需使用orHyperHTMLElement就可以访问组件的内容，因为它是一个元素。this.childrenthis.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()返回相同的，所以我可以在返回之前保存它并稍后访问它：Nodethis.node

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

但这在我看来并不干净。有一个更好的方法吗？

4

2 回答 2

2

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

如果你想使用这些信息，你可以使用一个属性来丰富你的组件来识别它们，就像data-is="custom-text-input"根元素上的 a 一样，然后访问它来做你需要的任何其他事情。

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 元素相关的实例。

我希望这些可能性回答了你的问题。

于 2017-09-14T09:20:32.767 回答
0

这是我过去通过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.

所以this.node上面ElementalComponent可以是 DOM 节点，也可以是基于渲染器所做的数组。

于 2017-09-12T00:55:39.790 回答