useRef typescript 'string' 不能用于索引类型'{}'

Question

我在使用 typescript 和 useRef 时遇到问题：

 <div ref={(el) => (listRef.current[v.name] = el)}>{v.name}</div>

v.name 是一个字符串，它不适用于我的界面：

interface listRefObj {
  [key: string]: string;
}

我No index signature with a parameter of type 'string' was found on type '{} | listRefObj'错误。 No index signature with a parameter of type 'string' was found on type '{} | listRefObj'

https://codesandbox.io/s/react-typescript-forked-8fnog1?file=/src/App.tsx

Answer 1

在您的代码中， el可以是HTMLDivElement | null HTMLDivElement | null （而不是string ）。 所以正确的注释应该是：

interface listRefObj {
  [key: string]: HTMLDivElement | null;
}

参考类型也需要只是listRefObj即useRef<listRefObj>({})

完整代码

import React, { useRef } from "react";
import "./styles.css";

interface listRefObj {
  [key: string]: HTMLDivElement | null;
}

export default function App() {
  const listRef = useRef<listRefObj>({});

  const result = [
    {
      id: 1,
      name: "apple"
    },
    {
      id: 2,
      name: "orange"
    }
  ];

  return (
    <div className="App">
      {result.map((v) => (
        <div ref={(el) => (listRef.current[v.name] = el)}>{v.name}</div>
      ))}
    </div>
  );
}