如何将 mobx 存储注入无状态组件

Question

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

当我运行上面的代码时，我在 connect 方法上得到 form 的 undefined 值。如何将商店注入无状态组件？我尝试在无状态组件上使用 @inject，但出现语法错误。

Answer 1

inject returns 可以在观察者功能组件上使用的函数：

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

Answer 2

@Tholle 答案的变体：

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

Answer 3

const Example = inject(
  'YOUR_STORE1',
  'YOUR_STORE2'
)(
  observer(({ navigation, YOUR_STORE1, YOUR_STORE2, OTHER_PROPS }) => {
    return (
      <View>
        // Your Design
      </View>
    )
  })
)

export default Example

如何将 mobx 存储注入无状态组件

How to inject mobx store into a stateless component

javascript

reactjs

mobx

mobx-react