如何通过Mobx存储作为道具来响应组件

Question

[我有一个使用mobx的应用程序，其中有一个名为“列表”的组件，该组件使用mobx的某些状态来呈现项目列表。

现在的方式是，Listings组件通过使用mobx存储从其内部获取所需的数据[store.restaurantResults[store.selectedFood]]：

const Listings = () => {
  const store = React.useContext(StoreContext);

  return useObserver(() => (
    <div className="pa2">
        {store.restaurantResults[store.selectedFood] &&
          store.restaurantResults[store.selectedFood].map((rest, i) => {
            return (
              <div key={i} className="pa2 listing">
                <p>{rest.name}</p>
              </div>
            );
          })}
    </div>
  ));
};

但是我认为这是错误的，因为它将组件与数据耦合在一起，我想改为通过props传递数据，以便可以重用。

正确的方法是什么？现在，我的App看起来像这样，它被包裹在storeProvider上：

function App() {
  return (
    <StoreProvider>
      <div className="mw8 center">
        <Header title="EasyLunch" subTitle="Find Pizza, Burgers or Sushi in Berlin the easy way"/> 
        <FixedMenu menuItem1={"Pizza"} menuItem2={"Burger"} menuItem3={"Sushi"} />
        <p className="b tc pt3">or...</p>
        <Search /> 
        <Listings />
      </div>
    </StoreProvider>
  );
}

[我的想法是将StoreProvider中的所有东西提取到另一个具有商店的组件中，并通过useObserver返回jsx，以便我可以访问该商店，然后将我需要的道具传递给其他组件。像这样：

const Wapper = () => {
  const store = React.useContext(StoreContext);
  return useObserver(() => (
    <div className="mw8 center">
      <Header title="EasyLunch" subTitle="Find Pizza, Burgers or Sushi in Berlin the easy way" />
      <FixedMenu menuItem1={"Pizza"} menuItem2={"Burger"} menuItem3={"Sushi"} />
      <p className="b tc pt3">or...</p>
      <Search />
      <Listings listings={store.restaurantResults[store.selectedFood]} />
    </div>
  ))
}

然后在清单组件上更改内部的硬编码store.restaurantResults[store.selectedFood]以使用现在正在传递的道具，即所谓的listigs，如下所示：

const Listings = ({listings}) => {
  const store = React.useContext(StoreContext);

  return useObserver(() => (
    store.loading
      ? <Loading />
      : <div className="pa2">
        <div className="flex flex-wrap">
          {listings &&
            listings.map((rest, i) => {
              return (
                <div key={i} className="pa2 listing">
                  <img className='object-fit' src={rest.image_url} alt="restuarant" />
                  <p>{rest.name}</p>
                  <p>{rest.location.address1}</p>
                </div>
              );
            })}
        </div>
      </div>
  ));
};

这可行，但这是解决这个问题的正确方法吗？

Answer 1

我通常将商店定义为全局商店，因此每个组件都具有可见性：

class Store {
  @observable myVar
}

global.store = new Store()

在我的组件中，我只是使用它：

@observer
export default class MyComponent extends React.Component {
  constructor () {
    super()
    store.myVar = 0
  }

  setMyVar (a) {
    store.myVar += 1
  }

  render () {
    return <button onClick={this.setMyVar}>
      Clicked {store.myVar} times
    </button>
  }
}