如何解决ScrollToTop 无法与打字稿反应
我在这个 github 问题之后有以下 scrollToTop 组件:https://github.com/ReactTraining/react-router/issues/6665
这是组件:
import React from "react";
import { useEffect } from "react";
import { useLocation,withRouter } from "react-router-dom";
const ScrollToTop: React.FC = (props: any) => {
const { pathname } = useLocation();
useEffect(() => {
window.scrollTo(0,0);
},[pathname]);
return props.children;
};
export default withRouter(ScrollToTop);
这是我的应用组件:
function App() {
const dispatch = useDispatch();
// fetches necessary configurations for elements img size etc.
const configMbdApiState = useSelector(
(state: RootStore) => state.postApiConfigurationReducer
);
const storeSearchValueHandlerState = useSelector(
(state: RootStore) => state.searchValueFromInputHandlerR
);
useEffect(() => {
dispatch(
postMDBConfigurationApi(
`https://api.themoviedb.org/3/configuration?api_key=${configMbdApiState.apiKey}`
)
);
dispatch(
postMoviesGenresFetchResponse(
`https://api.themoviedb.org/3/genre/movie/list?api_key=${configMbdApiState.apiKey}`
)
);
dispatch(
postTvshowsGenresFetchResponse(
`https://api.themoviedb.org/3/genre/tv/list?api_key=${configMbdApiState.apiKey}`
)
);
},[]);
// if user clicks outside the instant results div,it removes the div from the UI
const resetsUserSearchHandler = () => {
if (storeSearchValueHandlerState.userSearchValue.length > 0) {
dispatch(storesUserSearchValueHandler(""));
}
};
return (
<BrowserRouter>
<div className="App" onClick={resetsUserSearchHandler}>
<Switch>
<ScrollToTop>
<Route path="/" exact component={WelcomePage} />
<Route path="/home" component={Home} />
<Route
path="/details/movie/:title"
component={SingleMovieDetails}
/>
<Route path="/details/tv/:title" component={TvShowDetails} />
<Route path="/details/actor/:name" component={ActorDetails} />
<Route path="/results" component={ResultsPage} />
</ScrollToTop>
</Switch>
</div>
</BrowserRouter>
);
}
export default App;
我尝试过的事情:
- 控制台记录了路径名,看看它是否在每个渲染周期中都发生了变化,并且确实发生了变化。
- 我尝试移动 scrollToTop 并直接在组件上使用它,但它也不起作用。
- 目前我在滚动组件中使用“any”作为 props 类型。这可能是问题吗?
- 我正在使用 route-react-dom 中的 NavLink 来定向到其他路径,所以我真的不知道可能是什么问题。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。