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

Question

我试图用 React 渲染一个非常简单的 table，但它抱怨得很厉害：

"Invariant Violation: Table.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object."

定义如下：

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有效，不知道是什么问题。有人知道是什么问题吗？

Answer 1

这是一个babel编译问题。将 html-code 放在自己的行上。
return ( Header 1 Header 2 一二一二 );

并将class更改为class姓名

Answer 2

渲染方法中的 return 需要将所有内容嵌套在单个 <div> 标记下。

Answer 3

向 evan 致敬，他实际上在评论中提供了答案。

我只是被"auto"-Javascript插入分号绊倒了。单个 return 语句意味着从函数 return ，给它一个未定义的 return 值。以下 jsx 从未执行过。

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

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

Simple reactjs component rendering not valid - Reason?

javascript

reactjs