带有类型记录的类组件上的withNavigation
带有类型记录的类组件上的withNavigation
提问于 2022-03-29 20:53:37
请帮助我使用withNavigation实现这个最低工作的示例。
https://codesandbox.io/s/withnavigation-not-working-lds560?file=/src/index.js
import React, {Component} from "react";
import {withNavigation, NavigationInjectedProps} from "react-navigation";
class App extends Component<NavigationInjectedProps> {
render() {
return <h1>Hello CodeSandbox</h1>;
}
}
export default withNavigation(App);回答 2
Stack Overflow用户
发布于 2022-03-29 21:46:29
我找到了一个简单的解决方案，您可以在其中创建自己的自定义withNavigation。(我仍然在寻找一种解决方案，以使其工作，而不必创建您自己的自定义withNavigation函数)
App.tsx
import React, {Component} from "react";
import {useNavigate, NavigateFunction} from "react-router-dom";
class App extends Component<{navigate: NavigateFunction, text: string}> {
render() {
return <button onClick={() => this.props.navigate("/c")}>
We are at path: {this.props.text}, navigate to "/c"
</button>;
}
}
function withNavigation(Component: any): (props: any) => JSX.Element {
return props => <Component {...props} navigate={useNavigate()} />;
}
export default withNavigation(App);index.js
import * as ReactDOMClient from "react-dom/client";
import {Route, Routes, BrowserRouter } from "react-router-dom";
import App from "./App";
const rootElement = document.getElementById("root");
const root = ReactDOMClient.createRoot(rootElement);
root.render(
<BrowserRouter>
<Routes>
<Route path="/a" element={<App text={"a"}/>}/>
<Route path="/b" element={<App text={"b"}/>}/>
</Routes>
</BrowserRouter>
);Stack Overflow用户
发布于 2022-03-29 21:52:31
你得把你的
import {withNavigation, NavigationInjectedProps} from "react-navigation"到一个单独的文件，您必须将其包含在App中，并将其包装到<Navigation Container>中。
请参阅这里
更新：
我刚刚看到您正在尝试使用react-navigation 4！这可能不适用于我的解决方案，但考虑到版本4^不再被维护，您可能会考虑更新到版本5^。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71668651
复制相关文章
相似问题
腾讯云开发者
