React Datatables错误

我刚刚开始使用React，发现你的组件，并试图查看它是否适用于我需要做的事情，但我试图按照在浏览器中使用babel和静态网络服务器的入门示例但不断收到这种错误在ChromeReact Datatables错误

React.createElement：类型不能为空，未定义，布尔，或号。它应该是一个字符串（用于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/[email protected]/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

任何想法，我是什么错过或做错了？

来源

2016-08-24 Federico Giust

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

来源

2016-08-24 16:30:16

您正在收到该错误，因为ReactBsTable.TableHeaderColumn & 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

来源

2016-08-24 16:54:47 QoP

谢谢！有用！ –

React Datatables错误

回答

相关问题