web-dev-qa-db-ja.com

Mobxストアをステートレスコンポーネントに挿入する方法

Webアプリケーションでmobxとreactを使用していて、mobxストア状態をステートレスコンポーネントに渡す方法を見つけたいです。以下は私の現在のコンポーネントのソースコードです：

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

どうすればステートレスに変更できますか？以下のコードを試してみましたが、うまくいきませんでした：

const Creator = ({form}) => {

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

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

export default observer(Creator);

上記のコードを実行すると、undefinedメソッドでformのconnect値が得られました。ストアをステートレスコンポーネントに挿入するにはどうすればよいですか？ステートレスコンポーネントの上に@injectを使用しようとしましたが、構文エラーが発生しました。

javascriptreactjsmobxmobx-react
15
Joey Yi Zhao

injectは、オブザーバー機能コンポーネントで使用できる関数を返します。

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

@Tholle回答のバリアント：

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