[英]React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements)…; using fixed-data-table CDN
I have a react app that is getting errors 我有一个反应应用程序出现错误
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `BasicDataTableExample`.
and 和
Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. Check the render method of `BasicDataTableExample`.
I'm at the Create your Columns
section of https://facebook.github.io/fixed-data-table/getting-started.html 我在https://facebook.github.io/fixed-data-table/getting-started.html的“
Create your Columns
部分中
The difference is I'm using a cdn, and they use 区别在于我正在使用CDN,而他们使用
const {Table, Column, Cell} = require('fixed-data-table');
instead. 代替。
I try unpacking like const Table = FixedDataTable.Table;
我尝试像
const Table = FixedDataTable.Table;
, which seems to work when I went into debugger, but the app is broken. ,当我进入调试器时似乎可以使用,但是该应用程序坏了。 It looks like:
看起来像:
<!DOCTYPE html>
<html>
<head>
<title>data-table-basic</title>
<script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
<script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-router/4.0.0-beta.3/react-router.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/fixed-data-table/0.6.3/fixed-data-table.min.css" rel="stylesheet">
<head>
<body>
<a class="nav-link" href="/clock">clock</a>
<a class="nav-link" href="/counter">counter</a>
<a class="nav-link" href="/data-table-basic">data-table-basic</a>
<a class="nav-link" href="/query-params-react-router">query-params-react-router</a>
<a class="nav-link" href="/todo-list">todo-list</a>
<a class="nav-link" href="/validated-form">validated-form</a>
<div id="entry"></div>
<div id="code"></div>
<script type="text/babel">
var destination = document.querySelector("#entry");
const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;
const Cell = FixedDataTable.cell;
class BasicDataTableExample extends React.Component {
constructor(props) {
super(props);
this.state = {
myTableData: [
{name: 'Rylan'},
{name: 'Amelia'},
{name: 'Estevan'},
{name: 'Florence'},
{name: 'Tressa'},
],
};
}
render() {
return (
<Table
rowsCount={this.state.myTableData.length}
rowHeight={50}
headerHeight={50}
width={1000}
height={500}>
<Column
header={<Cell>Name</Cell>}
cell={props => (
<Cell {...props}>
{this.state.myTableData[props.rowIndex].name}
</Cell>
)}
width={200}
/>
</Table>
);
}
}
ReactDOM.render(
<div>
<BasicDataTableExample/>
</div>,
destination
)
</script>
</body>
</html>
How do I make the Table
, Column
, and Cell
show up correctly like they did using cdn? 如何像使用CDN一样正确显示
Table
, Column
和Cell
? Thank you 谢谢
The issue here is likely that Cell
is undefined
, as you are trying to retrieve it as 这里的问题很可能是
undefined
Cell
,因为您尝试将其检索为
const Cell = FixedDataTable.cell;
, while the property starts with an upper case C
: ,而属性以大写
C
开头:
const Cell = FixedDataTable.Cell;
If you are using CDN then wrap your function into IIFE: 如果使用的是CDN,则将函数包装到IIFE中:
(function() {
//your code will be executed after window load
})();
Timo is right. 蒂莫是对的。 But instead of
但是代替
const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;
const Cell = FixedDataTable.Cell;
you could destructure the components when importing the module using 您可以在导入模块时使用以下方法来分解组件
import {Table, Column, Cell} from 'fixed-data-table';
Less keystrokes. 更少的按键。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.