简单的 reactjs 组件渲染无效 - 原因

Simple reactjs component rendering not valid - Reason?

本文关键字：无效 原因 reactjs 组件 简单      更新时间：2023-09-26

我正在尝试用 react 渲染一个非常简单的表，但它痛苦地抱怨：

"不变违规：Table.render（）：必须返回有效的 ReactComponent。您可能返回了未定义的数组或其他一些无效对象。

定义如下：

var Table = React.createClass({
  render: function() {
    return 
    (<table class="table table-striped">
      <thead>
        <tr>
          <th>Header 1</th>
          <th>Header 2</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>One</td>
          <td>Two</td>
        </tr>
        <tr>
          <td>One</td>
          <td>Two</td>
        </tr>
      </tbody>
    </table>);
  }
});

它是返回的单个元素，HTML 有效，所以我不确定问题是什么。有人知道问题出在哪里吗？

给埃文的帽子提示，他实际上在评论中提供了答案。

我只是被Javascript的分号"自动"插入绊倒了。单个 return 语句意味着从函数返回，为其返回值 undefined。以下 JSX 从未被执行。

在与返回相同的行上启动 jsx 可确保返回按预期执行。

这是一个 babel 编译问题。将 html 代码放在它自己的行上。
返回 （ 页眉 1 页眉 2 一 二 一 二 );

并将类更改为类名

渲染方法的返回需要将所有内容嵌套在单个<div>标签下。

相关文章：