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

Question

我正在.Net Core 框架中创建 reactJS。我在我的 .net 应用程序中使用 ReactJS 作为 CDN，而我的 React 应用程序抛出一个错误：require is not defined。我在下面附上我的代码：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);

对于反应引导表，import仅在安装库时使用。同样，如果您也为此使用cdn，那么import将无法正常工作。

有关 react cdn 的更多信息，请查看此内容。

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

Answer 2

尝试使用 ES6import而不是require

即，尝试

import React from 'react';

import ReactDOM from 'react-dom';

import ReactBsTable from 'react-bootstrap-table';

因为require不是内置的 react api。您需要安装额外的库以require在反应中使用。CommonJs 为模块加载器提供 api，例如require