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不反應的典型模式的方法。以下應該沒有問題。

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

編輯：刪除了一些janky代碼。