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

【问题标题】：Simple reactjs component rendering not valid - Reason?简单的 reactjs 组件渲染无效 - 原因？
【发布时间】：2015-03-25 10:25:02
【问题描述】：

我正在尝试用 react 渲染一个非常简单的表格，但它抱怨得很厉害：

“Invariant Violation: 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 是有效的，所以我不确定是什么问题。有人知道是什么问题吗？

【问题讨论】：

您能提供更多代码吗？除了class（应该是className），这里没有任何问题。我的建议是查看生成的代码（如果使用转译过程，而不是浏览器 JSX 工具）。在以下情况下会引发此错误：github.com/facebook/react/blob/…
不确定还要提供什么代码。该组件确实是您所看到的。更改为 className 并没有改变任何东西。
是的，属性上的错误不会引发该错误。你看过生成的代码了吗？
不清楚这是否是复制/粘贴的产物，但请尝试将 return 语句和开头的括号放在同一行。我怀疑您在使用自动插入的分号时遇到了问题。
看来这就是答案，如果你想把它作为答案我会继续接受它，因为这解决了问题。

标签： javascript reactjs

【解决方案1】：

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

我只是被 Javascript 的“自动”插入分号绊倒了。单个 return 语句意味着从函数返回，给它一个未定义的返回值。以下 jsx 从未被执行。

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

【讨论】：

【解决方案2】：

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

【讨论】：

不，这不是必须的，任何 React 组件都可以作为 root。

【解决方案3】：

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

并将类更改为类名

【讨论】：