8

lit-html 是否有任何改变，比如 React 的ref特性？例如，在以下伪代码inputRef中将是一个回调函数或一个对象{ current: ... }，其中 lit-html 可以在创建/附加输入元素时传递/设置输入元素的 HTMLElement 实例。

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

谢谢。

4

5 回答 5

14

在 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>
    `;
  }
}
于 2020-01-24T22:30:16.913 回答
3

lit-html 直接渲染到 dom，所以你不需要像 react 那样需要 refs，你可以使用它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则可以使用 shadow dom 或this.querySelector不使用来访问内部元素

于 2019-11-27T03:37:10.097 回答
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.
---------------------------------------------------------

即使这不是我所要求的：

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

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

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

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

  1. 在渲染之前，设置elementRef.current为null
  2. 确保在elementRef.current重新渲染组件时无法读取（渲染elementRef.current时不需要，如果有人试图在渲染阶段读取它，则会引发异常）
  3. 如果可用，该elementRef.bind指令将填充elementRef.current实际的 DOM 元素。
  4. 之后，elementRef.current可以再次阅读。
于 2019-11-27T04:33:01.387 回答
1

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

于 2021-10-06T04:53:23.547 回答
1

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

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
于 2022-03-04T09:26:57.877 回答