如何注入mobx店,变成一个无状态组件

问题描述 投票:7回答:2

我使用mobxreact在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);

当我运行上面的代码,我得到的undefined方法form connect值。我怎样才能注入到店无状态组件?我试图在无状态组件的顶部使用@inject,却得到了一个语法错误。

javascript reactjs mobx mobx-react
2个回答
23
投票

inject返回可以一个观察者功能部件上使用的功能:

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

1
投票

@Tholle答案的变体:

const Example = inject("myStore")(observer(({myStore, otherProp}) => {
  // ...
}));
© www.soinside.com 2019 - 2024. All rights reserved.