如何键入 React ref 访问数组中的 DOM 元素答案

【问题标题】：How do I type a React ref accessing a DOM element from an array如何键入 React ref 访问数组中的 DOM 元素
【发布时间】：2020-04-17 23:56:59
【问题描述】：

假设我想访问 JSX 元素数组中的最后一个元素。

let array = [
  <button type="button" />,
  <button type="button" />,
  <button type="button" />,
];

let last = array[array.length - 1];

类型推断在这里工作正常。

但现在假设我想将 ref 附加到该数组中的最后一个元素。

let last = React.useRef<HTMLButtonElement>();

let array = [
  <button type="button" />,
  <button type="button" />,
  <button type="button" />,
];

last.current = array[array.length - 1];

上面的sn-p导致这个错误。

Type 'Element' is missing the following properties from type 'HTMLButtonElement':
disabled, form, formAction, formEnctype, and 249 more.

我想也许我需要显式输入array: HTMLButtonElement[]，但这只会将错误转移到数组声明中。

将 ref 类型更改为 React.useRef<JSX.Element> 将消除错误，但会失去确保其为按钮元素的特殊性。

【问题讨论】：

仔细检查文档以确保您正确使用参考：reactjs.org/docs/refs-and-the-dom.html（文档中的示例和您提供的示例非常不同）。另请注意，JSX 元素和 DOM 元素不是一回事。 ref.current 需要一个 DOM 元素，但是你的数组包含 JSX 元素（React.createElement('button'…) 的结果），所以它们不匹配。
渲染后，每个 JSX 元素都会有一个匹配的 DOM 元素，而 refs 就是你用来获取匹配的 DOM 元素的东西。
另外，为什么需要参考？你在用 DOM 元素做一些特定的事情吗？
啊，这对我创建一个混合 DOM 和 JSX 元素的示例很不利。我这样做是为了简化我遇到的问题，但随后又产生了一个新问题????。将示例更改为使用 document.createElement('button') 有效。

标签： reactjs typescript jsx

【解决方案1】：

在您的示例中，您可以将 ref 设置为最后一个元素的属性：

let last = React.useRef<Partial<HTMLButtonElement>|null>(null);
let array = [
  <button type="button" />,
  <button type="button" />,
  <button type="button" ref={last} />,
];

但我假设此示例已简化，并且不适用于您的实际用例...

【讨论】：

对，是的，让我们假设元素来自其他地方，动态添加/更改，是复合组件等。

【解决方案2】：

我的问题示例将 DOM 和 JSX 元素混为一谈。我在数组中使用了<button> JSX 元素来简化我遇到的问题，但随后错误地创建了一个新问题。

创建 DOM 元素而不是 JSX 元素是可行的。

let last = React.useRef<HTMLButtonElement>();

let array = [
  document.createElement('button'),
  document.createElement('button'),
  document.createElement('button'),
];

last.current = array[array.length - 1];

我们也可以通过在页面上查询得到DOM元素的数组（这是我的实际情况）。

let array = document.querySelectorAll<HTMLButtonElement>('button');

【讨论】：