我在尝试使用 props 时遇到了 typeript 错误，有没有办法解决这个问题？

Question

当我尝试使用 props 时，我遇到了 typeript 错误。 当我将鼠标悬停在主路由路径中带下划线的错误上时， *features*={features} ，我得到一个没有重载匹配这个调用。 我认为这个问题与道具有关，尽管我得到的错误是（如下）。 我会非常感激任何帮助。

No overload matches this call.
  Overload 1 of 2, '(props: (RouteProps<"/", {}> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>) | Readonly<RouteProps<"/", {}> & OmitNative<...>>): Route<...>', gave the following error.
    Type '{ path: "/"; component: FC<HomeProps>; features: any; exact: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "/">> & Readonly<RouteProps<"/", {}> & OmitNative<{}, keyof RouteProps<...>>> & Readonly<...>'.
      Property 'features' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "/">> & Readonly<RouteProps<"/", {}> & OmitNative<{}, keyof RouteProps<...>>> & Readonly<...>'.
  Overload 2 of 2, '(props: RouteProps<"/", {}> & OmitNative<{}, keyof RouteProps<string, { [x: string]: string | undefined; }>>, context: any): Route<{}, "/">', gave the following error.
    Type '{ path: "/"; component: FC<HomeProps>; features: any; exact: true; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "/">> & Readonly<RouteProps<"/", {}> & OmitNative<{}, keyof RouteProps<...>>> & Readonly<...>'.
      Property 'features' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Route<{}, "/">> & Readonly<RouteProps<"/", {}> & OmitNative<{}, keyof RouteProps<...>>> & Readonly<...>'.

这是我的代码以供进一步参考

import React, { FC, useState, useEffect } from "react";
import Sidebar from "./components/Sidebar";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import Order from "./pages/Order";
import History from "./pages/History";
import "./App.css";

import GeoJSON from 'ol/format/GeoJSON'

const App: FC = () => {

  const [ features, setFeatures ] = useState<any>([])

  useEffect( () => {

    fetch('/mock-geojson-api.json')
      .then(response => response.json())
      .then( (fetchedFeatures) => {

        const wktOptions = {
          dataProjection: 'EPSG:4326',
          featureProjection: 'EPSG:3857'
        }
        const parsedFeatures = new GeoJSON().readFeatures(fetchedFeatures, wktOptions)

        setFeatures(parsedFeatures);

      })

  },[])

  return (
    <div>
      <Router>
        <Sidebar />
        <Switch>
          <Route path="/" component={Home} features={features} exact />
          <Route path="/order" component={Order} />
          <Route path="/history" component={History} />
        </Switch>
      </Router>
    </div>
  );
};

export default App;

为了节省篇幅，我从之前的帖子中取出了一些评论。 在较早的帖子中，一位用户表示问题与通过功能发送的道具有关。 所以我决定包含正在导入并提供道具的 Home 组件。

import { FC } from "react";
import { useState, useEffect, useRef } from "react";
import "./mapwrapper.css";

import Map from "ol/Map";
import View from "ol/View";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ"; //here...

import { fromLonLat } from "ol/proj";
import Geometry from "ol/geom/Geometry";

type HomeProps = { features: any[] };

const Home: FC<HomeProps> = (props) => {
  const [map, setMap] = useState<Map>();
  const [featuresLayer, setFeaturesLayer] = useState<VectorLayer<VectorSource<Geometry>>>();
  
  const mapElement = useRef<HTMLDivElement>(null);

  const mapRef = useRef<{}>();
  mapRef.current = map;

  useEffect(() => {
    const initalFeaturesLayer = new VectorLayer({
      source: new VectorSource(),
    });

    const seoul = [126.97794, 37.56629];
    const seoulWebMercator = fromLonLat(seoul);

    // create map
    const initialMap = new Map({
      target: mapElement.current!,
      layers: [

        new TileLayer({
          source: new XYZ({
            url: "http://mt0.google.com/vt/lyrs=m&hl=en&x={x}&y={y}&z={z}",
          }),
        }),

        initalFeaturesLayer,
      ],
      view: new View({
        projection: "EPSG:3857",
        center: seoulWebMercator,
        zoom: 16,
      }),
      controls: [],
    });

    setMap(initialMap);
    setFeaturesLayer(initalFeaturesLayer);
  }, []);

  useEffect(() => {
    if (props.features?.length && featuresLayer) {

      featuresLayer.setSource(
        new VectorSource({
          features: props.features, // make sure features is an array
        })
      );

      map?.getView().fit(featuresLayer.getSource().getExtent(), {
        padding: [100, 100, 100, 100],
      });
    }
  }, [props.features, featuresLayer, map]);


  return (
    <div>
      <div ref={mapElement} className="map-container"></div>

    </div>
  );
};

export default Home;

Answer 1

您不能在 Route 组件中将features={features}作为 prop 传递，因为它没有那个 prop。

如果您必须将附加数据传递给Home组件，您可以使用其他策略，例如，您可以创建一个钩子来获取features数据并在Home组件中使用它。