react-bootstrap 组件产生错误

Question

我已经看到 react-bootstrap 的一些其他问题，但不是我的具体错误，所以我希望我的 post 通过关于口是心非的审核规则。我正在尝试学习反应，我只想将 bootstrap 用于 CSS。

我将 react-bootstrap documentation site 中的 table 代码复制到我的组件中。调用渲染时出现此错误：

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

react-bootstrap 组件产生错误

react-bootstrap component generates error

reactjs

react-bootstrap