create-react-app示例应用程序问题

Question

我正在尝试创建一个示例create-react-app app：

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

现在它说编辑src / App.js，好吧...... 我想使用反应组件fixed-data-table

现在，在该页面上是一个＆＃34;基本示例＆＃34;当我将它粘贴到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')
);

这给了我以下错误：

我做错了什么？

Answer 1

这是因为您尝试在不存在的元素中呈现React，将document.getElementById('example')更改为document.getElementById('root')

<强>更新 您的App.js文件应该使用React组件类中的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'));