Question

我试图利用create-react-app创建一个DataTables表，并且我想通过CDN加载依赖项。

我已经使用简单的html / javascript成功创建了该表（请参见codepen here）

<html>
<head>
    <link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet'>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js">
    </script>
    <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'>
    </script>
</head>
<body>
    <table class="display" id="example" style="width:100%"></table>
    <script>
           $("#example").DataTable({
     data: [
       {
         first_name: "Tiger",
         last_name: "Nixon",
         position: "System Architect"
       },
       {
         first_name: "Garrett",
         last_name: "Winters",
         position: "Accountant"
       }
     ],
     columns: [
       { data: "first_name", title: "first" },
       { data: "position", title: "secon" }
     ]
    });

    </script>
</body>
</html>

我正在尝试使用create-react-app产生相同的结果。

我尝试了以下操作，并且还在此codesandbox here

中进行了复制

将以下依赖项添加到public / index.html

  <link href='https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css' rel='stylesheet' />
  <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
  <script src='https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js'></script>

在codeandbox中将三个依赖项添加到外部资源中

下面是假定要呈现DataTables的组件

class App extends Component {
  componentDidMount() {
    $("#example").DataTable({
      data: [
        {
          first_name: "Tiger",
          last_name: "Nixon",
          position: "System Architect"
        },
        {
          first_name: "Garrett",
          last_name: "Winters",
          position: "Accountant"
        }
      ],
      columns: [
        { data: "first_name", title: "first" },
        { data: "position", title: "secon" }
      ]
    });
  }
  render() {
    return (
      <div>
        <table id="example" />
      </div>
    );
  }
}

Answer 1

在您的代码沙箱中，您已经再次导入了jQuery，尽管由于您的CDN链接已经存在。如果您删除了该导入，则它似乎可以正常工作。

您可能需要调整一些eslint规则，以告知CRA您正在使用jQuery，但这应该可以解决您的问题。

如何将CDN依赖项导入到create-react-app设置中？

1 个答案: