Javascript 如何将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)}/>
    );
  }
};

从“React”导入React；
从“./Panel”导入面板；
从“mobx react”导入{inject，observer}；
@注入（所有存储=>({
表单：allStores.store.form，
}))
@观察者
导出默认类创建者扩展React.Component{
连接（）{
console.log（this.props.form）；
};
render（）{
返回(
);
}
};

如何将其更改为无状态？我尝试了以下代码，但没有成功：

const Creator = ({form}) => {

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

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

export default observer(Creator);

constcreator=（{form}）=>{
常量连接=（）=>{
控制台日志（'xxxx'，表格）；
}
返回(
);
}
导出默认观察者（创建者）；

---

当我运行上述代码时，我在

connect

方法上得到了

form

的

undefined

值。如何将存储注入无状态组件？我试图在无状态组件上使用

@inject

，但出现语法错误。

inject

返回一个可以在观察者功能组件上使用的函数：

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

---

@Tholle答案的变体：

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

---

当您试图使用它时，它不是一个函数。

“myStore”

实际上是您想要注入的存储的实例？我猜是的。注射从哪里来？是mobx还是mobx-react-lite？当我搜索它的时候，我会看到一个页面，上面说这个网站不推荐使用。这个答案适用于哪个版本的MobX？@PatS您可以注入任何值，但很可能您将注入一个存储实例，是的。这是包装的一部分。文档中说“通常不再需要在新的代码库中使用

Provider

/

inject

；它的大部分功能现在都包含在

React.createContext

中。”