Question

考虑一个案例：

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的{{1}}来自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>
    );
  }
}

Answer 1

Provider是一个可以使用商店（或其他东西）传递的组件   React的子组件的上下文机制。如果你这很有用   有你不想通过多层次的东西   组件明确。

注入可以用来拿起那些商店。这是一个更高的顺序   获取字符串列表并生成这些商店的组件   可用于包装组件。

Provider和inject是React context API的抽象（直到最近才非常不稳定）。

提供程序使组件上下文中的数据可用，而inject HOC提供了一个简单的API来声明我们想要的上下文并将其传递给包装器组件。

同样适用于react-redux等其他库。

如果提供者据说已经将所有道具传递给所有孩子，那么注入装饰者的重点是什么？

1 个答案: