React应用程序不显示任何内容

Question

我正在使用create-react-app。我正在遵循this示例，但我尝试使用我自己的应用程序。当我运行此代码时，浏览器中没有显示任何内容。

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import './fixed-data-table-style.css';


// Table data as a list of array.
const rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

class TableExample extends React.Component {
    renderTable() {
        return(
        <Table
            rowHeight={50}
            rowsCount={rows.length}
            width={5000}
            height={5000}
            headerHeight={50}>
            <Column
            header={<Cell>Col 1</Cell>}
            cell={<Cell>Column 1 static content</Cell>}
            width={2000}
            />
            <Column
            header={<Cell>Col 2</Cell>}
            cell={<Cell mySpecialProp="column2" />}
            width={1000}
            />
            <Column
            header={<Cell>Col 3</Cell>}
            cell={({rowIndex, ...props}) => (
                <Cell {...props}>
                Data for column 3: {rows[rowIndex][2]}
                </Cell>
            )}
            width={2000}
            />
        </Table>)
    }

    render() {
        return ( 
            <div> 
               { this.renderTable() }
            </div> 
        );
    }
}

// Render your table
ReactDOM.render(
  <TableExample /> , document.getElementById('root')
);

Answer 1

创建返回jsx的方法不是react中的典型模式。下面的代码应该可以工作，没有问题。

import React from 'react';
import ReactDOM from 'react-dom';
import {Table, Column, Cell} from 'fixed-data-table';
import './fixed-data-table-style.css';


// Table data as a list of array.
const rows = [
  ['a1', 'b1', 'c1'],
  ['a2', 'b2', 'c2'],
  ['a3', 'b3', 'c3'],
  // .... and more
];

class TableExample extends React.Component {


    render() {
        return ( 
            <div> 
                <Table
            rowHeight={50}
            rowsCount={rows.length}
            width={5000}
            height={5000}
            headerHeight={50}>
            <Column
            header={<Cell>Col 1</Cell>}
            cell={<Cell>Column 1 static content</Cell>}
            width={2000}
            />
            <Column
            header={<Cell>Col 2</Cell>}
            cell={<Cell mySpecialProp="column2" />}
            width={1000}
            />
            <Column
            header={<Cell>Col 3</Cell>}
            cell={({rowIndex, ...props}) => (
                <Cell {...props}>
                Data for column 3: {rows[rowIndex][2]}
                </Cell>
            )}
            width={2000}
            />
        </Table>
            </div> 
        );
    }
}

// Render your table
ReactDOM.render(
  <TableExample /> , document.getElementById('root')
);

编辑:删除了一些简陋的代码。