我可以将类基础组件放在函数基础组件中以使用反应钩子吗？答案

【问题标题】：Can I put class base components inside function base components to use react hooks?我可以将类基础组件放在函数基础组件中以使用反应钩子吗？
【发布时间】：2021-03-16 22:39:56
【问题描述】：

我有一个主要使用类基反应组件编写的应用程序，但是我们正在使用 Stripe 实现付费专区功能。

问题是条带使用钩子，它不适用于类基础组件。是否可以将子类基础组件放入父函数基础组件中以实现此目的。如果不将每个组件都重写为函数基础组件，我将如何做到这一点。

每次尝试包含具有类基子级的函数基组件总是会产生此错误：

错误：无效的挂钩调用。 Hooks 只能在函数组件的主体内部调用。

是否有任何变通方法，或者我应该将所有组件重写为功能组件？

使用 react-router-dom 作为查询参数的快速示例，然后将这些参数传递到类基子组件中。

 function useQuery() {
   return new URLSearchParams(useLocation().search);
 }

const App = () => {
let query = useQuery();

return (
  <Provider store={store}>
    <Router>
      <div className="App">
        <Navbar />
        <Switch>
          {/* Public Pages */}
          <Route exact path="/" component={Landing} ref={query.get('ref')} /> 
       </Switch>
      </div>
    </Router>
  </Provider>
)
}
 export default App;

然后假设落地组件是一个简单的类基组件，它将把prop设置为状态。

【问题讨论】：

如果你可以在你正在工作的文件上放一些代码示例，那么可以更好地帮助你。绝对可以将功能组件用作父组件，将类组件用作子组件，

标签： reactjs react-redux react-router react-hooks stripe-payments

【解决方案1】：

组件的类型与父子关系无关。但是你不能在 classBased 组件中使用钩子。仅在功能性方面

【讨论】：

您好，感谢您的评论。我更关心是否可以在父功能组件中使用钩子，然后将它们传递给子类组件
是的，我用useCallback 试过了，它和其他人一样。我已经将它传递给组件并调用它。你不能通过钩子，但结果你可以。在您提供的示例中，您只传递了钩子的结果。它应该工作。更精确的代码示例会更好地理解

【解决方案2】：

这里是函数式组件作为父类和类作为子级的代码示例

import React , {Component}from "react";
import "./styles.css";

const App = () => {
  return (
    <div className="App">
      <h1>I Am Parent Functional Component</h1>
      <Child />
    </div>
  );
};

export default App;

class Child extends Component
{

  render(){
    return(
      <h2>I am Class Child Component</h2>
    )
  }
}

【讨论】：

是的，但是我的问题是我是否允许在父函数组件中使用钩子，然后将该数据传递给类子组件。我试过了，但我收到了一个错误。（错误：无效的钩子调用。只能在函数组件的主体内部调用钩子。）。我希望弄清楚问题是否是由于子组件正在运行。

【解决方案3】：

好的，我发现了这个问题的问题。由于我在互联网上发现同样的问题没有得到解答，所以我决定自己回答这个问题，仅供任何寻求我遇到的相同解决方案的人参考。

您可以在父函数基础组件上使用 Hook，并将信息传递给子基础组件。

在渲染应用程序时，出现错误

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

但是这个错误是由于 npm 中的过时模块造成的。我刚刚将 react-router-dom 从 4.1 更新到 5.2.0 npm update react-router-dom，它似乎解决了使用功能基础组件作为父组件的问题。

更新模块后，我能够在父函数基础组件中使用挂钩，并使用道具将其传递给子类基础组件。

【讨论】：