lit-html / lit-element 中类似 React 的引用？

Question

lit-html 是否有类似 React 的 ref 功能的任何变化？例如在下面的伪代码中 inputRef 将是一个回调函数或一个对象 { current: ... } 其中 lit-html 可以 pass/set 输入元素的 HTMLElement 实例当输入元素是 created/attached.

// that #ref pseudo-attribute is fictional
html`<div><input #ref={inputRef}/></div>`

谢谢。

Answer 1

lit-html 直接渲染到 dom 所以你不需要像在 React 中那样需要引用，你可以使用 querySelector 来获取渲染的引用输入

如果您只使用 lit-html

，这里有一些示例代码

<html>

<head>
  <title>lit-html example</title>
  <script type="module">
    import { render, html } from 'https://cdn.pika.dev/lit-html/^1.1.2'; 
    const app = document.querySelector('.app'); 
    const inputTemplate = label => { 
      return html `<label>${label}<input value="rendered input content"></label>`;
    }; 
    // rendering the template
    render(inputTemplate('Some Label'), app);
    // after the render we can access it normally
    console.log(app.querySelector('input').value);
  </script>
</head>

<body>
  <div class="app"></div>
  <label>
    Other random input
    <input value="this is not the value">
  </label>
</body>

</html>

如果您使用的是 LitElement，则可以使用 this.shadowRoot.querySelector 访问内部元素（如果您使用的是影子 dom 或 this.querySelector 如果您不使用

Answer 2

-- [EDIT - 6th October 2021] ----------------------------
Since lit 2.0.0 has been released my answer below
is completely obsolete and unnecessary!
Please check https://lit.dev/docs/api/directives/#ref
for the right solution.
---------------------------------------------------------

即使这不是我所要求的：

根据具体用例，要考虑的一种选择是使用 directives。

在我非常特殊的用例中，例如（有点运气和一些技巧）可以或多或少地模拟 ref 对象的行为。

const inputRef = useElementRef() // { current: null, bind: (special-lit-html-directive) }
...
return html`<div><input ref=${inputRef.bind}/></div>`

在我的用例中，我可以执行以下操作：

渲染前，将elementRef.current设置为null
确保在重新渲染组件时无法读取elementRef.current（渲染时不需要elementRef.current，如果有人试图在渲染阶段读取它会抛出异常）
如果可用，elementRef.bind 指令将用实际的 DOM 元素填充 elementRef.current。
之后elementRef.current可以再读

Answer 3

在 lit-element 中你可以使用 @query 属性装饰器。这只是 this.renderRoot.querySelector().

周围的语法糖

import { LitElement, html, query } from 'lit-element';

class MyElement extends LitElement {
  @query('#first')
  first;

  render() {
    return html`
      <div id="first"></div>
      <div id="second"></div>
    `;
  }
}

Answer 4

正如@WeiChing 在上面某处提到的，从 Lit 2.0 版开始，您可以为此使用新添加的指令 ref： https://lit.dev/docs/templates/directives/#ref

Answer 5

对于lit-html v1，您可以定义自己的自定义导数：

import { html, render, directive } from "lit-html";
    
function createRef(){ return {value: null}; }
    
const ref = directive((refObj) => (attributePart) => {
  refObj.value = attributePart.committer.element;
});
    
const inputRef = createRef();
render(html`<input ref=${ref(inputRef)} />`;
     
// inputRef.value is a reference to rendered HTMLInputElement

lit-html / lit-element 中类似 React 的引用？

React-like refs in lit-html / lit-element?

lit-element

lit-html

lit