Блог

Главная - Вопросы по программированию - Могу ли я поместить базовые компоненты класса внутрь базовых компонентов функции, чтобы использовать перехватчики реакции?

Могу ли я поместить базовые компоненты класса внутрь базовых компонентов функции, чтобы использовать перехватчики реакции?

#reactjs #react-redux #react-router #react-hooks #stripe-payments

#reactjs #react-redux #react-router #реагирующие хуки #stripe-платежи

Вопрос:

У меня есть приложение, которое было написано в основном с использованием компонентов react на основе классов, однако мы внедряем функцию платного доступа с Stripe.

Проблема в том, что stripe использует перехваты, которые не работают с базовыми компонентами класса. Возможно ли для достижения этой цели поместить базовый компонент дочернего класса в базовый компонент родительской функции. Как бы я мог это сделать, не переписывая каждый компонент в качестве базового компонента функции.

Каждая попытка включить базовый компонент функции с дочерними элементами базового класса всегда приводит к этой ошибке:

Ошибка: недопустимый вызов перехвата. Перехваты могут вызываться только внутри тела функционального компонента.

Есть ли какие-либо обходные пути, или я должен переписать все компоненты как функциональные компоненты?

Краткий пример использования 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 в состояние.

Комментарии:

1. Если бы вы могли поместить какой-нибудь пример кода в файлы, над которыми вы работаете, это могло бы помочь вам лучше. Безусловно, вы можете использовать функциональные компоненты в качестве родительских, а компонент класса — в качестве дочернего,

Ответ №1:

Тип компонента не имеет значения в отношении родитель-потомок. Но вы не можете использовать перехваты внутри компонента на основе класса. Только в функциональных

Комментарии:

1. Привет, пока я ценю комментарий. Меня больше беспокоит, могу ли я использовать перехваты в родительском функциональном компоненте, а затем передавать их в компонент дочернего класса

2. Да, я пробовал это с 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>
    )
  }
}

Комментарии:

1. Ах да, однако мой вопрос в том, разрешено ли мне использовать перехваты в родительском функциональном компоненте, а затем передавать эти данные дочернему компоненту класса. Я пробовал, но получил сообщение об ошибке. (Ошибка: недопустимый вызов перехвата. Хуки могут вызываться только внутри тела функционального компонента.). Я надеялся выяснить, связана ли проблема с функциональностью дочернего компонента.

Ответ №3:

Хорошо, я разобрался с этой проблемой. Поскольку я нашел тот же вопрос без ответа в Интернете, я решил ответить на этот вопрос сам, просто для справки в будущем для тех, кто ищет то же решение, с которым я столкнулся.

Вы можете использовать перехваты для базового компонента родительской функции и передавать информацию в дочерний базовый компонент.

При рендеринге приложения мне было выдано сообщение об ошибке

 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 , и, похоже, это решает проблему использования функционального базового компонента в качестве родительского.

После обновления модуля я смог использовать перехваты в базовом компоненте родительской функции и передать их базовому компоненту дочернего класса, используя props.

Метки: ,