reactjs错误未捕获ReferenceError：未定义require

Question

我正在.Net Core框架中创建reactJS。我在.net应用程序中将ReactJS用作CDN，而我的React App抛出错误：require未定义。我在下面附加我的代码：

abilities

Answer 1

尝试使用ES6 import代替require

即，尝试

import React from 'react';
import ReactDOM from 'react-dom';
import ReactBsTable from 'react-bootstrap-table';

因为require不是内置的react api。 您需要安装额外的库才能在React中使用require。 CommonJs为模块加载器（例如require

）提供了api

Answer 2

请尝试这个

您正在使用CDN的主要html文件中添加此文件。

<script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<script type="text/babel"></script>

<!-- Load our React component. -->
<script src="new_component.js"></script>

<!-- ... existing HTML ... -->

<div id="new_component_container"></div>

<!-- ... existing HTML ... -->

在组件文件中执行此操作，

import ReactBsTable from  'react-bootstrap-table';
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

var products = [{
    id: 1,
    name: "Product1",
    price: 120
}, {
    id: 2,
    name: "Product2",
    price: 80
}];

const domContainer = document.querySelector('#new_component_container');
ReactDOM.render(
  <BootstrapTable data={products} version='4'>
    <TableHeaderColumn isKey dataField='id'>Product ID</TableHeaderColumn>
    <TableHeaderColumn dataField='name'>Product Name</TableHeaderColumn>
    <TableHeaderColumn dataField='price'>Product Price</TableHeaderColumn>
  </BootstrapTable>, 
domContainer);

对于React bootstrap表，也仅在安装库时使用import。同样，如果您也使用CDN，则import将不起作用。

有关react CDN的更多信息，请查看此。

https://reactjs.org/docs/add-react-to-a-website.html