web-dev-qa-db-fra.com

Comment injecter Mobx Store dans un composant sans état

J'utilise mobx et react dans une application Web et je veux trouver un moyen de passer mobx l'état du magasin à un composant sans état. Voici le code source de mon composant actuel:

import React from 'react';
import Panel from './Panel';
import {inject, observer} from 'mobx-react';

@inject(allStores => ({
  form: allStores.store.form,
}))
@observer
export default class Creator extends React.Component {

  connect() {
    console.log(this.props.form);
  };

  render() {
    return (
      <Panel form={this.props.form} connect={this.connect.bind(this)}/>
    );
  }
};

Comment puis-je le changer pour qu'il soit apatride? J'ai essayé le code ci-dessous mais je n'ai pas fonctionné:

const Creator = ({form}) => {

  const connect = ()=>{
    console.log('xxxx,', form);
  }

  return (
    <Panel form={form} connect={connect}/>
  );
}

export default observer(Creator);

lorsque je lance au-dessus du code, j'ai obtenu la valeur undefined pour form sur la méthode connect. Comment puis-je injecter le magasin dans un composant sans état? J'ai essayé d'utiliser @inject au-dessus du composant sans état, mais a obtenu une erreur de syntaxe.

javascriptreactjsmobxmobx-react
15
Joey Yi Zhao

inject renvoie une fonction que vous pouvez utiliser sur un composant fonctionnel d'observateur:

var Example = inject("myStore")(observer((props) => {
  // ...
}));
12
Tholle

Une variante de la réponse @Tholle:

const Example = inject("myStore")(observer(({myStore, otherProp}) => {
  // ...
}));
0
Xero