Question

我已经看到了react-bootstrap的一些其他问题，但没有看到我的具体错误，所以我希望我的帖子能够通过关于双重性的审核规则。我正在尝试学习反应，我只想使用CSS的bootstrap。

我将表格代码从react-bootstrap documentation site复制到我的组件中。调用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>
  );
}

react-bootstrap组件生成错误

1 个答案: