我可以将 class 基础组件放入 function 基础组件中以使用反应挂钩吗？

Question

I have an app that was written mainly with class base react components, however we are implementing a paywall feature with Stripe.

The issue is stripe uses hooks, which don't work with class base components. Is it possible to put a child class base component into a parental function base component in order to achieve this. How would I go about doing this without rewriting every component as a function base component.

Every attempt to include a function base component with class base children always yields this error:

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

Are there any work arounds, or should I re-write the all the components as functional components?

A quick example using react-router-dom for query parameters, then passing those into a class base child component.

 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;

Then assuming that the landing components is a simple class base component that will set the prop into the state.

Answer 1

Component's type doesn't matter in relation parent-child. But you can't use hooks inside of classBased component. Only in functional ones

Answer 2

Here is the code example of Functional Component as Parent and Class as Child

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>
    )
  }
}

Answer 3

Okay I figured out the issue with this problem. Since I found the same question unanswered on the internet, I decided to answer the question myself, Just for future reference for anyone looking for the same solution I was running into.

You can use Hooks on a parental Function Base Component and pass on the information into a child base component.

While rendering the application, I was given an error

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

However this error was due to outdated modules in npm. I just updated the react-router-dom from 4.1 to 5.2.0 npm update react-router-dom and it seem to solve the issue of using functional base component as a parent.

After updating the module I was able to use a hooks in a parental function base component and pass that on to a child class base component using props.