React Datatables Fehler

Ich beginne gerade mit React und fand Ihre Komponente und versuche zu sehen, ob es für das, was ich tun soll, funktioniert, aber ich versuche, das erste Beispiel mit babel im Browser und einem statischen Webserver zu folgen aber halten diese Art von Fehler in Chrome bekommenReact Datatables Fehler

React.createElement: Typ sollte nicht null, nicht definiert, boolean oder Nummer. Es sollte eine Zeichenfolge (für DOM-Elemente) oder eine ReactClass (für Composite-Komponenten) sein.

Das ist mein 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>

Das ist mein app.js ist (wie von react-bootstrap-table genommen)

'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") 
);

a Hier jsfiddle version

Jede Idee, was ich bin vermisst oder falsch gemacht?

Quelle

2016-08-24 Federico Giust

Anstatt React.render() zu verwenden, versuchen Sie, ReactDOM.render() zu verwenden. Nun hängt es auch davon ab, welche React-Version Sie verwenden.

Quelle

2016-08-24 16:30:16

Sie erhalten diesen Fehler, weil ReactBsTable.TableHeaderColumn & ReactBsTable.BootstrapTableundefined zurückgeben.

Diese

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

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

Auch sein sollte, haben Sie ReactDOM.render() statt React.render()

fixed jsfiddle

Quelle

2016-08-24 16:54:47 QoP

Sie verwenden Dank! Es klappt! –

React Datatables Fehler

Antwort

Verwandte Themen