为什么在 tr 中定义的元素不能是 tbody 的子元素？

Question

我正在做一个小彩票游戏来学习 React。目标是这样的：单击一个按钮，它会用随机数填充 18x6 的表格。

所以我有一个table，那张桌子有一个tbody。

我定义了一个 React 组件，Ball ，它表示一个包含数字 1-40 的单个表格单元格：

const Ball = props => {
    return (
        <td className="ball">
            {Math.floor(Math.random() * (40 - 1) + 1)}
        </td>
    );
}

然后我定义一个ballRow，它只是一排六个球。

const ballRow = props => {
    return (
        <tr>
            <Ball />
            <Ball />
            <Ball />
            <Ball />
            <Ball />
            <Ball />
        </tr>
    );
}

现在我在表中呈现我的第一行：

ReactDOM.render(<ballRow />, document.getElementsByTagName("tbody")[0]);

但这失败了，因为<ballrow> cannot appear as a child of <tbody>.

这让我感到困惑。ballrow是一个tr元素，这正是tbody内部的内容。那么为什么它不是一个有效的孩子呢？

Answer 1

将ballRow更改为BallRow 。

const BallRow = props => {
  return (
    <tr>
      <Ball />
      <Ball />
      <Ball />
      <Ball />
      <Ball />
      <Ball />
    </tr>
  );
}
ReactDOM.render(<BallRow />, document.getElementsByTagName("tbody")[0]);

Example

JSX 标记名称约定（小写名称是指内置的 组件，大写名称是指自定义组件）。