Question

我刚开始使用React并找到了你的组件并试图查看它是否适用于我需要做的事情，但我正在尝试按照浏览器和静态网络服务器中使用babel的入门示例进行操作Chrome中的这种错误

React.createElement：type不应为null，undefined，boolean或数。它应该是一个字符串（对于DOM元素）或一个ReactClass（对于复合材料组件）。

这是我的index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="vendor/js/react-bootstrap-table.js"></script>
    <script src="https://npmcdn.com/babel-core@5.8.38/browser.min.js"></script>
    <script src="js/app.js" type="text/babel"></script>
    <link rel="stylesheet" type="text/css" href="vendor/css/react-bootstrap-table.css">
</head>
<body>
   <div id="basic"></div>
</body>
</html>

这是我的app.js（取自react-bootstrap-table）

'use strict';

var ReactBsTable = window.BootstrapTable;
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

// products will be presented by ReactBsTable
var products = [
  {
      id: 1,
      name: "Product1",
      price: 120
  },{
      id: 2,
      name: "Product2",
      price: 80
  },{
      id: 3,
      name: "Product3",
      price: 207
  },{
      id: 4,
      name: "Product4",
      price: 100
  },{
      id: 5,
      name: "Product5",
      price: 150
  },{
      id: 6,
      name: "Product1",
      price: 160
  }
];

React.render(
  <BootstrapTable data={products} striped={true} hover={true}>
      <TableHeaderColumn isKey={true} dataField="id">Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
  </BootstrapTable>,
    document.getElementById("basic")
);

这是jsfiddle version

知道我错过了什么或做错了吗？

Answer 1

尝试使用ReactDOM.render（）而不是使用React.render（）。那么它还取决于你使用的反应版本。

Answer 2

您收到该错误是因为ReactBsTable.TableHeaderColumn＆amp; ReactBsTable.BootstrapTable正在返回undefined。

此

var ReactBsTable = window.BootstrapTable;
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

应该是

var BootstrapTable = window.BootstrapTable;
var TableHeaderColumn = window.TableHeaderColumn;

此外，您必须使用ReactDOM.render()代替React.render()

fixed jsfiddle

React Datatables错误

2 个答案: