我如何在React的Context API中使用react-habitat

Question

所以我正在使用react-habitat进行非SPA。

我想使用像react-breakpoints这样的东西，在普通的React SPA中，你用App组件包裹，

ReactDOM.render(
  <ReactBreakpoints breakpoints={breakpoints}>
    <App />
  </ReactBreakpoints>, 
  document.getElementById('root')
)

但是react-habitat并没有这样的东西。

Answer 1

编辑2

我刚刚更新了代码示例，我认为这可行。注意我还没有测试过这段代码。

修改

我刚看到你的评论，你不想要多个实例，公平。您可能希望在下面的代码示例中查看将单例类似的内容合并到一起，以便它始终将Module包装在同一个实例中：https://www.npmjs.com/package/react-singleton

Millage可能会有所不同..我从来没有尝试过单件组件。

我是React Habitat的核心维护者之一。您可以通过创建自定义工厂来实现此目的。

例如

<强> ReduxBreakpointsFactory.js

import { Provider }     from 'react-redux';
import React            from 'react';
import ReactDom         from 'react-dom';
import Singleton from 'react-singleton';
import ReactBreakpoints from 'react-breakpoints';
import breakpoints from './breakpoints';

var ReactBreakpointsInstance = new Singleton(ReactBreakpoints);

/**
 * React Redux DOM Factory
 */
export default class ReduxDomFactory {

    constructor(store = null) {

        /**
         * The redux store
         */
        this.store = store;
    }

    /**
     * Inject the module into the dom wrapped in a redux provider
     * @param {*} module - The component to inject
     * @param {object} props  - The component props
     * @param {node} target - The node to inject to
     */
    inject(Module, props = {}, target) {
        if (target) {
          ReactDom.render(
            <Provider store={this.store}>
              <ReactBreakpointsInstance breakpoints={breakpoints}>
                <Module {...props} />
              </ReactBreakpointsInstance>
            </Provider>
            ),
            target
        }
    }

    /**
     * Dispose of any react instances for a node
     * @param {node} target - The node to tear down
     */
    dispose(target) {
        if (target) {
            ReactDom.unmountComponentAtNode(target);
        }
    }
}

在您的引导程序文件中

import BreakpointsFactory from './BreakpointsFactory';

const store = configureStore();
const containerBuilder = new ReactHabitat.ContainerBuilder();

containerBuilder.factory = new BreakpointsFactory(store);

希望有所帮助;-)如果你发布这个工厂，请告诉我，我会从React Habitat发布一个链接。