reactjs错误未捕获的ReferenceError：未定义要求

Question

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

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

请试试这个，

你使用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

Answer 2

尝试使用 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