创建反应的应用程序内的示例应用程序的问题

Question

我试图创建一个示例创建反应的应用程序内的应用程序：

create-react-app my-app 
cd my-app/ 
npm start 

现在说编辑的src/App.js，确定... 我要使用反应组件现在fixed-data-table

，该网页上是一个“基本实例”，这给了很多的错误，当我将其粘贴到SRC/App.js - 一定的编辑之后，我得到它归结为：

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

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

// Render your table 
ReactDOM.render(
    <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} 
    />  
    </Table>, 
    document.getElementById('example') 
); 

哪个gi VES我下面的错误：

我在做什么错？

Answer 1

这是因为你试图呈现做出反应的是不存在的元素，改变document.getElementById('example')到document.getElementById('root')

更新 你App.js文件应当使用实施从阵营组件类render()功能：

import React, {Component} from 'react'; 
import ReactDOM from 'react-dom'; 
import { Table, Column, Cell } from 'fixed-data-table'; 

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

// Render your table 
class App extends Component { 

    render() { 
    return (<div> 
    <div>Hello world</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} 
     />  
    </Table> 

    </div>) 
    } 
} 

export default App; 

那么你的index.js文件，只需要渲染App组件

ReactDOM.render(<App />, document.getElementById('root'));