Website-Suche

reactjs - Typ 'FunctionComponent>' ist nicht dem Typ 'string' zuweisbar. ts

Ich erhalte den folgenden Fehler, wenn ich meine auf JS basierende React-App in TypeScript konvertiere.

Type 'FunctionComponent<SVGAttributes<SVGElement>>' is not assignable to type 'string'.ts(2322)
index.d.ts(2188, 9): The expected type comes from property 'src' which is declared here on type 'DetailedHTMLProps<ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>'

Unten ist meine App.tsx-Datei

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.tsx</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Hier zeigt das src-Attribut des Bild-Tags diesen Kompilierungsfehler

Keine Ahnung, wie man das löst

Meine React-Version ist 9.1.2

Ich habe versucht, eine React-App mit als TypeScript angegebenem Template zu erstellen, derselbe Code funktioniert einwandfrei, und ich habe den Inhalt dieser TSX-Datei in meine React-App kopiert, es wird derselbe Fehler angezeigt.

npx create-react-app myapp --template typescript

Der gleiche Inhalt in dieser App funktioniert ohne Probleme. Ich habe auch die tsconfig.json in mein Hauptprojekt kopiert. Das hat in keiner Weise geholfen.

Antwort #1

Ändern Sie Ihren Inhalt von

declare module "*.svg" {
    const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
    export default content;
}

zu

declare module "*.svg" {
    const content: any;
    export default content;
}

Antwort #2

Hier sind einige Möglichkeiten, wie Sie das erreichen können: https://blog.logrocket.com/how-to-use-svgs-in-react/

Ich empfehle diese Option, da sie einfach zu schreiben ist und es Ihnen ermöglicht, später die Kontur und Füllung der SVG zu ändern.

import { ReactComponent as ReactLogo } from './logo.svg';

const App = () => {
  return (
    <div className="App">
      <ReactLogo />
    </div>
    );
  };

Verwandte Artikel