React.createElement:类型不应为空、未定义、布尔值或数字.它应该是一个字符串(对于 DOM 元素)..

我有一个 React 应用程序出现错误

警告：React.createElement：类型不应为空、未定义、布尔值或数字。它应该是一个字符串（对于 DOM 元素）或一个 ReactClass（对于复合组件）。检查 BasicDataTableExample 的渲染方法。

和

未
捕获错误：元素类型无效：需要字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。检查 BasicDataTableExample 的渲染方法。

我在 https://facebook.github.io/fixed-data-table/getting-started.html 的Create your Columns部分

不同之处在于我使用的是 cdn，而他们使用

const {Table, Column, Cell} = require('fixed-data-table');

相反。

我尝试像const Table = FixedDataTable.Table;一样解压缩，当我进入调试器时似乎可以工作，但应用程序坏了。它看起来像：

<!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>

如何使Table、Column和Cell像使用 cdn 一样正确显示？

这里的问题可能是Cell undefined ，因为您正在尝试将其检索为

const Cell = FixedDataTable.cell;

，而属性以大写字母开头 C ：

const Cell = FixedDataTable.Cell;

如果您使用的是 CDN，请将您的函数包装到 IIFE 中：

(function() {
    //your code will be executed after window load
})();

Timo 是对的。但不是

const Table = FixedDataTable.Table;
const Column = FixedDataTable.Column;
const Cell = FixedDataTable.Cell;

您可以在导入模块时使用

import {Table, Column, Cell} from 'fixed-data-table';

更少的击键。

导入时的 MDN 文档

相关内容

最新更新

热门标签：