反应 - 安装反应表答案

【问题标题】：React - install react-table反应 - 安装反应表
【发布时间】：2018-05-13 06:01:33
【问题描述】：

我正在尝试安装react-table，但在设置 CDN 时遇到了问题。我当前的 index.html 文件如下：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Code_LMS</title>
        <link rel="stylesheet" href="/css/bootstrap.css" />
        <link rel="stylesheet" href="/css/style.css" />
        <!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->
        <!-- <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/> -->
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    </head>

    <body background="EasyMed.png">
        <div id="app"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
        <script src="bundle.js"></script>
    </body>
</html>

谁能告诉我应该将 CDN 中提到的链接/脚本放在我的 index.html 文件中的什么位置，这样才不会弄乱我的依赖关系？谢谢！

【问题讨论】：

尝试在引导后添加。
你的意思是在我提供了引导样式表的链接之后添加？
我应该在head标签中添加所有提供的源（链接+脚本）吗？
是的，它应该可以工作，检查答案中的示例

标签： javascript css reactjs cdn react-table

【解决方案1】：

class App extends React.Component {

  render() {
    return ( <
      div >
      <
      ReactTable columns = {
        [{
            Header: "Name",
            columns: [{
                Header: "First Name",
                accessor: "firstName"
              },
              {
                Header: "Last Name",
                id: "lastName",
              }
            ]
          },
          {
            Header: "Info",
            columns: [{
                Header: "Age",
                accessor: "age"
              },
              {
                Header: "Status",
                accessor: "status"
              }
            ]
          },
          {
            Header: 'Stats',
            columns: [{
              Header: "Visits",
              accessor: "visits"
            }]
          }
        ]
      }
      defaultPageSize = {
        10
      }
      className = "-striped -highlight" /
      >
      <
      br / >
      <
      /div>
    );
  }
}



ReactDOM.render( <
  App / > ,
  document.getElementById('app')
);

<meta charset="utf-8">
<title>Code_LMS</title>
<link rel="stylesheet" href="/css/bootstrap.css" />
<link rel="stylesheet" href="/css/style.css" />
<!-- change this up! http://www.bootstrapcdn.com/bootswatch/ -->
<!-- <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cosmo/bootstrap.min.css" type="text/css" rel="stylesheet"/> -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<body background="EasyMed.png">
  <div id="app"></div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="bundle.js"></script>
  <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <!-- CSS -->
  <link rel="stylesheet" href="https://unpkg.com/react-table@latest/react-table.css">

  <!-- JS -->
  <script src="https://unpkg.com/react-table@latest/react-table.js"></script>
  <script src="https://unpkg.com/react-table@latest/react-table.min.js"></script>

  <script>
    var ReactTable = window.ReactTable.default
  </script>
</body>

【讨论】：

我复制粘贴了您共享的第二个代码 sn-p 的正文部分，但它仍然无法正常工作。我收到错误：./node_modules/react-table/react-table.css 中的错误模块解析失败：意外的令牌 (1:0) 您可能需要适当的加载程序来处理此文件类型。我正在使用 style-loader 加载通过 webpack 指定的 .css 文件。你能告诉我我在这里做错了什么吗？
没关系，我让它工作了！我从错误中怀疑发生了一些 .css 加载器问题，所以我将 css-loader 添加到了 css 加载器列表以及我的 webpack.config 文件中的 style-loader 并且它起作用了！谢谢你的回答！