0

Пытаюсь переписать приложение React + mobx с использованием хуков + mobx-react-lite. Поделитесь опытом, как должна выглядеть модель взаимодействия компонентов между собой на примере следующей простой задачи:

function App() {  
  return (
    <div className="App">
      <div className="frame">
        <Header store={store} />          
        <Table store={store} />
        <IntroButton store={store} />
      </div>
    </div>
  );  
}

Header, Table, IntroButton - 'observer' компоненты которые через props получали экземпляр class Store. Свои события они биндили к соответствующим методам класса.

onChange={store.ChangeFilter.bind()}

Внутри класса находились observable переменные, которые изменялись. Теперь я изменил описание class Store на function Store() и столкнулся с трудностями... Из-за того что теперь экземпляр класса не создается, через props передается ссылка на функцию?! Биндить методы теперь тоже не получается... Как в принципе должно выглядеть взаимодействие между компонентами и некоторым менеджером роль которого в моем примере выполняет class Store?

1 ответ 1

0

Насколько я понял, вам нужно создать экземпляр класса Store для каждого инстанса компонента App.

Для этого используют хук useEffect

function App() {
  const [store, setStore] = React.useState(undefined)
  React.useEffect(()=>{
    setStore(new Store()) // Создаем инстанс только внутри эффекта
  },
  []) // Пустой список зависимых переменных является эквивалентом конструктора
  ...
}

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.