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錯誤

回答

相關問題