Question

我正在制作一个小彩票游戏来学习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内的元素。那为什么它不是一个有效的孩子？

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标记名称约定（小写名称是指内置的组件，大写名称是指自定义组件。）

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

1 个答案: