1

我想通过 cdnjs 和 SystemJS 在 Web 应用程序中使用 react-virtualized。

从我看到的所有示例来看，react-virtualized 和 react 库似乎是在本地加载的，然后在包含在网页中之前与 Webpack 捆绑在一起。现在我想通过没有 Webpack 的 cdnjs 使用它，只需使用 SystemJS 导入它。但是当我尝试这样做时，我收到错误说它找不到 React。

我想知道是否有人以前尝试过这个，以及反应虚拟化是否完全支持这一点。谢谢。

更新： 为清楚起见，我包含了一些代码来显示我正在尝试做的事情。

索引.html：

...
<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.20.0-alpha.1/system.js"></script>
  <script>
    System.config({
        map: {
            "react":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js",
            "react-dom":"https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js",
            "react-virtualized":"https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"
        }
  </script>
</head>
...

主.jsx：

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column} from 'react-virtualized';
...
4

2 回答 2

2

您正在做的事情可以使用react-virtualized. 你可以在这里看到一个例子。但是，为了使其正常工作，您还需要导入 UMD 构建，react-with-addons并且依赖于它们react-dom。react-virtualized

例如：

<script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script>
<script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script>
<script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script>

UMDreact-virtualized构建期望 React 和 ReactDOM 加载到全局空间中。

或者，应该有一种使用 SystemJS 的方法来公开react-dom并react-with-addons作为库喜欢react-virtualized使用的全局变量。我不是 SystemJS 用户，但我认为它可能是这样的：

System.config({
  meta: {
    'path/to/react-virtualized.js': {
      globals: {
        React: 'path/to/react-addons-shallow-compare.js',
        ReactDOM: 'path/to/react-dom.js'
      }
    }
  }
});
于 2016-11-21T23:40:52.540 回答
0

已经有一段时间了，但我有时间再看一遍。感谢@brianvaughn 的建议，我设法通过以下方式解决了这个问题：

System.config({
   meta: {
      "react-virtualized": {
         exports: "ReactVirtualized",
         format: "global",
         globals: {
            React: "react",
            ReactDOM: "react-dom"
         }
      }
   },
   map: {
      "react":    "https://unpkg.com/react@16/umd/react.production.min.js",
      "react-dom":"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js",
      "react-virtualized":"https://cdnjs.cloudflare.com/ajax/libs/react-virtualized/9.10.1/react-virtualized.min.js",
   }
})

主.jsx

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

let Table = ReactVirtualized.Table;
let Column = ReactVirtualized.Column;
let AutoSizer = ReactVirtualized.AutoSizer;
...
于 2017-10-06T01:16:21.553 回答