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

Question

我正在制作一个小彩票游戏来学习 React。目标类似于 this：单击一个按钮，它会用随机数填充 table 18x6。

所以我有一个 table，那个 table 有一个 tbody。

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

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>
    );
}

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

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

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

这让我很困惑。 ballrow 是一个 tr 元素，这正是 tbody 中的内容。那么为什么它不是有效的 child?

Answer 1

将 ballRow 更改为 BallRow。

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

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

Example

the JSX tag name convention (lowercase names refer to built-in components, capitalized names refer to custom components).

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

Why can't an element defined inside a tr be a child of a tbody?

reactjs

react-jsx