数据表Bootstrap主题在使用ReactJS时不适用

我是RequireJS的新手，所以请保持温柔！

下面是我的HTML和JS的链接，如果你运行它，你会看到数据表已正确初始化，但它没有应用bootstrap主题。

链接问题：

https://jsfiddle.net/sajjansarkar/c2f7s2jz/2/

我究竟做错了什么？

下面是我的JS（如果小提琴不起作用）：

requirejs.config({ paths: { 'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery', 'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min', 'datatables': 'https://cdn.datatables.net/v/bs/dt-1.10.12/b-1.2.2/b-colvis-1.2.2/b-html5-1.2.2/cr-1.3.2/fh-3.1.2/kt-2.1.3/r-2.1.0/sc-1.4.2/se-1.2.0/datatables.min', }, shim: { 'bootstrap': { deps: ['jquery'] }, 'datatables': ['jquery', 'bootstrap'], } }); require([ 'jquery', 'bootstrap', , 'datatables' ], function($, Bootstrap, datatables) { 'use strict'; $('#example').dataTable(); }); 

HTML：

        ... 
 
 
 
Name
 
Position
 
Office
 
Age
 
Start date
 
Salary
 
 
 
 
 
Tiger Nixon
 
System Architect
 
Edinburgh
 
61
 
2011/04/25
 
$320,800
 
  

Answer 1

你要做的事情有很多问题：

1. 用于paths的文件看起来像是包含一堆串联在一起的匿名AMD模块。 匿名模块是define调用未设置模块名称的模块。 这些模块从启动其加载的require调用获取其模块名称。 您不能只是连接匿名模块来创建一个包。 还必须更改对define的调用，以将模块名称添加为define调用的第一个参数。 该文件可能对不使用任何模块加载器的人有用，但您不能将其与RequireJS一起使用。

   因此，您必须为数据表和datatables.bootstrap设置单独的paths 。

2. 数据表的shim是无用的，因为数据表调用define和shim仅适用于不调用define文件。

3. 如果要对数据表使用Bootstrap样式，则必须以某种方式加载datatables.bootstrap 。 你目前不这样做。 （即使您加载的软件包已修复为使用RequireJS，您也必须在某处显式请求datatables.bootstrap 。）

4. datatables.bootstrap将尝试加载datatables.net而不是数据表。 您需要在任何地方将数据表称为datatables.net ，或者您可以像我在下面一样使用map 。

如果我将JavaScript修改为此，我会得到正确的结果：

 requirejs.config({ paths: { 'jquery': 'https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery', 'bootstrap': 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min', 'datatables': 'https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min', 'datatables.bootstrap': 'https://cdn.datatables.net/1.10.15/js/dataTables.bootstrap.min', }, shim: { 'bootstrap': { deps: ['jquery'] }, }, map: { '*': { 'datatables.net': 'datatables', } }, }); require(['jquery', 'datatables.bootstrap'], function($) { 'use strict'; $('#example').dataTable(); }); 

这是一个分叉的小提琴 。