无法将道具传递给 React Router 页面组件，TS2322

Question

我正在与 typescript 编译器作斗争，试图在呈现为 React Router 页面的导出组件中期待道具。 （我使用的是最新版本的react-router-dom 5.2.0。

在我的图书馆代码中：

interface AppProps {
    baseApiUrl?: string
}
export function App({
    baseApiUrl = ''
}: AppProps): React.ReactElement<AppProps> { /* my component code */ }

在我看到 typescript 错误的实现代码中：

export function Sandbox(): React.ReactElement {
    return (
        <BrowserRouter>
            <Switch>
                <Route path="*">
                    <App baseApiUrl="http://localhost:3000"  />
                </Route>
            </Switch>
        </BrowserRouter>
    )
}

为什么我收到此 typescript 错误？

TS2322: Type '{ baseApiUrl: string; }' is not assignable to type 'IntrinsicAttributes & AppProps'.
  Property 'baseApiUrl' does not exist on type 'IntrinsicAttributes & AppProps'.
     8 |            <Switch>
     9 |                <Route path="*">
  > 10 |                    <App baseApiUrl="http://localhost:3000"  />
       |                         ^^^^^^^^^^
    11 |                </Route>
    12 |            </Switch>
    13 |        </BrowserRouter>

这个 IntrinsicAttributes 来自哪里？ 我该怎么做才能让编译器满意？

我已经尝试像这样重写 function 签名：

export const App: React.FC<AppProps> = (props) => { /* my component code */ }

并得到相同的编译器错误。

Answer 1

回答你不需要做任何事情来让编译器满意。

正如您在https://codesandbox.io/s/vibrant-wood-5clyq?file=/src/App.tsx 看到的那样，您共享的代码很好，所以一定有其他一些代码以某种方式损坏。 例如，您有两个都称为 AppProps 的东西，产生错误的那个与您共享的那个不同。 鉴于您没有分享最小的可重现示例，这只是一个猜测。

也许您可以通过分叉我上面共享的沙箱来制作一个可重现的示例？