javascript - 为什么不 render black but Hello doesn't?

Question

我正在尝试学习 React.JS，但有些事情让我大吃一惊。

我有这个标题组件:

class Header extends Component {
  render() {
    return <div style={{ backgroundColor: "black" }} />;
  }
}

我在 App.js 中调用:

function App() {
  return <Header />;
}

当代码保持这样时，我的网页上没有任何显示。但是如果我将 Header 组件更改为:

class Header extends Component {
      render() {
        return <div style={{ backgroundColor: "black" }}> Hi</div>;
      }
    }

我的网页顶部出现一条黑线。

我不明白为什么在我的 div 中写入一些内容会让我得到黑线，我想知道如何在不写入任何内容的情况下获得黑色背景？

Answer 1

您的标题没有高度，因此在没有文本的情况下，其高度为 0px，因此您看不到背景颜色，如果您将文本添加到标题，它会拉伸(stretch)以容纳文本，因此它会自动获取高度，这就是您看到背面背景的原因。

如果您想要一个带有黑色背景的空标题，请尝试按照@Kayden van Rijn 所述编辑代码，如下所示 style={{ backgroundColor: "black", height: "32px"}}