react-bootstrap組件生成錯誤

Question

我已經看到了其他一些與react-bootstrap有關的問題，但沒有看到我的特定錯誤，所以我希望我的帖子通過有關重復性的審核規則。 我正在嘗試學習反應，我只想對CSS使用引導程序。

我將表代碼從react-bootstrap文檔站點復制到了我的組件中。 調用render時出現此錯誤：

未捕獲的錯誤：TableLayout.render（）：必須返回有效的ReactComponent。

我的組件看起來像這樣：

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