如何解决无法将道具传递给 React Router 页面组件,TS2322
我正在与 typescript 编译器作斗争,试图在导出的组件中期望 props,该组件呈现为 React Router 页面。 (我使用的是最新版本的 react-router-dom
,5.2.0。
在我的库代码中:
interface AppProps {
baseApiUrl?: string
}
export function App({
baseApiUrl = ''
}: AppProps): React.ReactElement<AppProps> { /* my component code */ }
在我看到打字稿错误的实现代码中:
export function Sandbox(): React.ReactElement {
return (
<BrowserRouter>
<Switch>
<Route path="*">
<App baseApiUrl="http://localhost:3000" />
</Route>
</Switch>
</BrowserRouter>
)
}
为什么我会收到此打字稿错误?
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 来自哪里?我该怎么做才能让编译器满意?
我已经尝试像这样重写函数签名:
export const App: React.FC<AppProps> = (props) => { /* my component code */ }
并得到相同的编译器错误。
解决方法
回答你不需要做任何事情来让编译器满意。
正如您在 https://codesandbox.io/s/vibrant-wood-5clyq?file=/src/App.tsx 处看到的,您共享的代码很好,所以一定有其他一些代码以某种方式被破坏了。例如,您有两个都称为 AppProps 的东西,产生错误的东西与您共享的东西不同。鉴于您没有分享 minimal reproducible example,这只是一个猜测。
也许您可以通过分叉我上面分享的沙箱来制作一个可重现的示例?
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。