使用 React-hook 的 function 组件是否可以从 class 组件内部渲染

Question

我在我的所有组件中使用 react-hook。 现在，当我要渲染它时，它在 React_Router BrowserRouter 组件内，它给了我一个错误。

错误按摩：无效的挂钩呼叫。 钩子只能在 function 组件的主体内部调用

Answer 1

如果我能很好地理解你的问题，我认为你可以用 hoo 做嵌套路由。

例如，这将是您的主路由器：

 import React from 'react'; import {Switch, Route, withRouter, Link} from "react-router-dom"; import MyComponent from "./MyComponent"; class Main extends React.Component { render() { return ( <div className='main'> <Switch> <Route exact path='/test' component={MyComponent} /> </Switch> </div> ); } } export default withRouter(Main);

这将是您的带有嵌套路由的路由组件。

 import React from 'react'; import {Switch, Route, withRouter} from "react-router-dom"; class MyComponent extends React.Component { render() { const {path} = this.props.match; return ( <div className='test'> <Switch> <Route path={`${path}/catalog`}> <div>Route catalog</div> </Route> <Route exact path={path}> <div>Route dashboard</div> </Route> </Switch> </div> ); } } export default withRouter(MyComponent);

Answer 2

在过去的几天里，我遇到了同样的错误。 在我的情况下，问题是我使用 Route 组件的渲染道具而不是组件道具

<Route render={FunCompWithHooks} /> {/* wrong */}
<Route component={FunCompWithHooks} /> {/* correct */}