代码之家 › 专栏 › 技术社区 › jayarjo

如果说提供者已经将所有道具传递给了所有的孩子,那么注入装饰器有什么意义呢?

mobx-react mobx reactjs

1

jayarjo · 技术社区 · 6 年前

考虑一个案例:

import { Provider } from 'mobx-react';
import usersStore from './stores/usersStore';
import itemsStore from './stores/itemsStore';

const stores = { usersStore, itemsStore };

ReactDOM.render(
  <Provider {...stores}>
    <SomeComponent />
  </Provider>,
  document.getElementById('app')
);

所以,没有 SomeComponent 在上面的示例中,已经得到了这两个 usersStore 和 itemsStore 作为其 props 从…起 Provider ?为什么 @inject('itemsStore') 以下示例中的行是否需要?

@inject('itemsStore') @observer
class SomeComponent extends React.Component {
  render() {
    return (
      <div className="index">
        {this.props.itemsStore.items.map((item, index) => {
          return <span key={index}>item.name</span>
        })}
      </div>
    );
  }
}

1 回复 | 直到 6 年前

1

4

Tomasz Mularczyk 6 年前

提供程序是一个组件,可以使用 React的上下文机制对子组件。如果您拥有你不想通过多层组件显式。

inject可以用来购买这些商店。这是一个更高的要求获取字符串列表并进行存储的组件可用于已包装的组件。

Provider 和 inject 是要反应的抽象 context API (直到最近还相当不稳定)。

提供程序从组件上下文中提供数据,而 注射 HOC提供了一个简单的API来声明上下文之外的内容,并将其传递给包装器组件。

这同样适用于其他库,如 react-redux 。