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

Question

mobxとreactをWebアプリケーションで使用しており、ステートレスコンポーネントに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); 

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

Answer 1

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

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