reactjs - 尝试在 Electron/React/Typescript 项目中使用 react-dnd 失败

Question

帮助！！

我正在尝试将 react-dnd 添加到我的 [即将完成] Electron/React/Typescript 项目中，基于此样板：https ://github.com/Robinfr/electron-react-typescript

无论我似乎在提供程序中包装了什么，从应用程序一直到上面我希望 dnd 的组件，我都会得到相同的错误：Object(...) is not a function

Uncaught TypeError: Object(...) is not a function
    at DndProvider (DndProvider.js:54)
    at renderWithHooks (react-dom.development.js:16240)
    at updateFunctionComponent (react-dom.development.js:18327)
    at updateSimpleMemoComponent (react-dom.development.js:18265)
    at updateMemoComponent (react-dom.development.js:18168)
    at beginWork$1 (react-dom.development.js:20222)
    at HTMLUnknownElement.callCallback (react-dom.development.js:337)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:386)
    at invokeGuardedCallback (react-dom.development.js:441)
    at beginWork$$1 (react-dom.development.js:2573

这是我将应用程序包装在 app.tsx 中的方式

import * as React from 'react';
import * as ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';

import { createMuiTheme, ThemeProvider } from '@material-ui/core/styles';

// https://react-dnd.github.io/react-dnd/docs/api/dnd-provider
import { HTML5Backend } from 'react-dnd-html5-backend'
import { DndProvider } from 'react-dnd'

import Application from './containers/Application';

const themeObj = require('./themes/yellowed.json');

// https://material-ui.com/components/typography/
// https://material-ui.com/customization/default-theme/
// https://kitson-broadhurst.medium.com/quickly-set-up-a-theme-in-material-ui-and-access-it-in-your-components-ba0565304887
const theme = createMuiTheme(themeObj);

// Create main element
const mainElement = document.createElement('div');
mainElement.style.userSelect = 'none';

document.body.appendChild(mainElement);

// Render components
const render = (Component: () => JSX.Element) => {
    ReactDOM.render(
        <DndProvider backend={HTML5Backend}>
            <AppContainer>
                <ThemeProvider theme={theme}>
                    <Component />
                </ThemeProvider>
            </AppContainer>
        </DndProvider>
        , mainElement
    );
};

render(Application);

我已经尝试将所有不同的元素一直包装到我希望进行 DnD 的元素，但我得到了同样的错误

我已经深入跟踪执行到反应，直到我无法理解发生了什么，它似乎找不到反应根容器，然后在试图刷新同步回调队列时死掉......

function unbatchedUpdates(fn, a) {
  var prevExecutionContext = executionContext;
  executionContext &= ~BatchedContext;
  executionContext |= LegacyUnbatchedContext;

  try {
    return fn(a);
  } finally {
    executionContext = prevExecutionContext;

    if (executionContext === NoContext) {
      // Flush the immediate callbacks that were scheduled during this batch
      flushSyncCallbackQueue();
    }
  }
}

标签： reactjstypescriptelectron