简体   繁体   English

React.createElement:type不能为null,undefined,boolean或number。 它应该是一个字符串(用于DOM元素)…; 使用固定数据表CDN

[英]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一样正确显示TableColumnCell 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. 更少的按键。

MDN docs on import 有关导入的MDN文档

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 React.createElement:type不能为null,undefined,boolean或number。 它应该是一个字符串(用于DOM元素)或ReactClass - React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass 警告:React.createElement:type不能为null,undefined,boolean或number - Warning: React.createElement: type should not be null , undefined, boolean, or number React.createElement:类型不应为空、未定义、布尔值或数字错误 - React.createElement: type should not be null, undefined, boolean, or number Error 警告:React.createElement:类型不能为null,undefined,boolean或number - Warning: React.createElement: type should not be null, undefined, boolean, or number React.createElement:type不能为null,undefined,boolean或number - React.createElement: type should not be null, undefined, boolean, or number React - React.createElement:type不应为null,undefined,boolean - React - React.createElement: type should not be null, undefined, boolean React-警告:React.createElement:类型不能为null,undefined,boolean或number - React - Warning: React.createElement: type should not be null, undefined, boolean, or number ES6 + React,错误:React.createElement:类型不应为null,undefined,boolean或number - ES6+React, Error:React.createElement: type should not be null, undefined, boolean, or number React.createElement:type不能为null或未定义 - React.createElement: type should not be null or undefined ES6 ReactJS 警告:React.createElement:类型不应为空、未定义、布尔值或数字 - ES6 ReactJS Warning: React.createElement: type should not be null, undefined, boolean, or number
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM