react-bootstrap組件生成錯誤

Question

我已經看到一些與react-bootstrap有關的其他問題，但不是我的具體錯誤，所以我希望我的帖子通過關於重複性的審覈規則。我正在嘗試學習反應，我只想使用CSS的引導程序。

我將表代碼react-bootstrap documentation site複製到我的組件中。當渲染叫我得到這個錯誤：

Uncaught Error: TableLayout.render(): A valid ReactComponent must be returned.

我的組件看起來是這樣的：

import React from 'react'; 
import Table from 'react-bootstrap'; 

console.log("render TableLayout 2"); 

class TableLayout extends React.Component { 
    render() { 
     return 
     <div> 
      <Table striped bordered condensed hover> 
       <thead> 
        <tr> 
        <th>#</th> 
        <th>First Name</th> 
        <th>Last Name</th> 
        <th>Username</th> 
        </tr> 
       </thead> 
      </Table> 
     </div> 
    } 
} 
export default TableLayout; 

，我調用通過我的app.js爲：

import React from 'react'; 
import { render } from 'react-dom'; 
import TableLayout from './TableLayout.jsx'; 

render(
    <TableLayout />, 
    document.getElementById('app') 
); 

任何想法這個實現有錯嗎？

謝謝 馬特

Answer 1

像錯誤狀態，您實際上並不返回任何東西，因爲你的JSX既不開始在同一行return聲明，也不是包裹在括號中。現在的JavaScript解釋你render()方法：

return; // returns nothing 

<div> 
    ... 
</div> 

試試這個：

render() { 
    return (
    <div> 
     <Table striped bordered condensed hover> 
     <thead> 
      <tr> 
      <th>#</th> 
      <th>First Name</th> 
      <th>Last Name</th> 
      <th>Username</th> 
      </tr> 
     </thead> 
     </Table> 
    </div> 
); 
}