supfiger

Question

React
+1 ещё

Средний

Как создать личный сайт-портфолио на React?

2 подписчика
более трёх лет назад
1124 просмотра

2

ответа

Answer 1 · 2020-06-04 20:02:47

Ответ 1:

Импортируешь Provider в файл index.js, чтобы не пробрасывать props через каждый дочерний компонент:
import { Provider } from "mobx-react";

В файле index.js оборачиваешь компонент рендеринга в Provider:

ReactDOM.render(<Provider store={store}>
    <App />
  </Provider>, document.getElementById('root'));

Импортируешь inject в нужный компонент, где нужно использовать тебе store:
import { inject } from "mobx-react";

Если классовый компонент, можешь повесить @inject("store") перед объявлением класса, где значение в скобках — название твоего пропса, который ты передаешь в Provider в index.js:

import React, { Component } from 'react';
import { inject } from "mobx-react";

@inject("store")
class Form extends Component {
  render() {
    return (
      <form className="form">
        <select>
          <option></option>
        </select>
      </form>
    );
  }
}

export default Form;

Если компонент функциональный, то можно сделать так:

import React from "react";
import { inject } from "mobx-react";

const App = () => {
  return <div className="App">Hello World!</div>;
};

export default inject("store")(App);

Ответ 2:

Теперь доступ к store есть из любого компонента, который находится в дереве Provider и на котором повешен @inject("store").
Чтобы вызвать метод из стора, следуй примеру ниже. Допустим, вызовем метод по нажатию кнопки:
```
<button onClick={() => this.props.store.getUsers()}></button>
```
И, насколько я понимаю, нужно обернуть вызываемую функцию в стрелочную функцию, то есть: () =>, если нужный метод находится за пределами текущего файла. В твоем случае — да.

Можешь еще сделать деструктуризацию, и обращаться сразу к нужному методу:
```
const { getUsers } = this.props.store;
  // какой-то код

  return <button onClick={() => getUsers()}></button>;
};
```