reactjs 错误 Uncaught ReferenceError: require is not defined

Question

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

var React = require('react');
var ReactDOM = require('react-dom');
var ReactBsTable = require('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
}];

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>, document.getElementById('content')
);

Answer 1

尝试使用 ES6 import而不是require

即，尝试

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

因为require不是内置的 react api。 您需要安装额外的库以在反应中使用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 table，只有在安装库时才使用import 。 同样，如果您也为此使用 cdn，则import将不起作用。

有关 react cdn 的更多信息，请查看这里。

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