reactjs - 为什么在tr内部定义的元素不能成为tbody的子代？

我正在做一些彩票游戏来学习React。目标类似于this：单击一个按钮，它将用随机数填充表格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内部的元素。那为什么不成为一个有效的孩子呢？

最佳答案

将ballRow更改为BallRow。

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

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

Example


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