javascript - Opprette en referanse til linjediagram ved bruk av react-chartjs-2

Jeg prøver å lage en referanse til diagrammet jeg bygger med chart.js og react-chartjs-2.

Her er linjen hvor jeg prøver å lage referansen som spesifiserer typen: const chartRef=useRef<Line>(null);

Og dette er feilen jeg får:

'Line' refers to a value, but is being used as a type here. Did you mean 'typeof Line'?

Jeg fant følgende dokumentasjon, men siden jeg er ny på TypeScript vet jeg ennå ikke hvordan jeg skal tolke den. Her er hele koden jeg bruker:

import { Line } from "react-chartjs-2";

import {
  Chart as ChartJS,
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
} from "chart.js";
import { useRef } from "react";

ChartJS.register(
  CategoryScale,
  LinearScale,
  PointElement,
  LineElement,
  Title,
  Tooltip,
  Legend
);

export const data = {
  labels: ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],
  datasets: [
    {
      label: "First dataset",
      data: [33, 53, 85, 41, 44, 65],
      fill: true,
      backgroundColor: "rgba(75,192,192,0.2)",
      borderColor: "rgba(75,192,192,1)"
    },
    {
      label: "Second dataset",
      data: [33, 25, 35, 51, 54, 76],
      fill: false,
      borderColor: "#742774"
    }
  ]
};

export default function App() {
  const chartRef = useRef<Line>(null);

  return (
    <div className="App">
      <h1>This is a chart.</h1>
      <Line data={data} ref={chartRef} />
    </div>
  );
}

Kan du vise meg riktig retning? Takk!

Svar #1

Jeg er ikke veldig kjent med ChartJS, men da jeg endret din eksisterende kode fra const chartRef=useRef<Line>(null); til const chartRef=useRef<'line'>(null); (i henhold til dokumentasjonen), ga linteren meg en bedre idé om hva som trengte å bli fikset (på ref).

I ditt tilfelle:

export function App() {
  const chartRef = useRef<ChartJS<"line", number[], string>>(null);

  return (
    <div className="App">
      <h1>This is a chart.</h1>
      <Line data={data} ref={chartRef} />
    </div>
  );
}

Arbeidende CodeSandbox

Relaterte artikler