Javascript 为什么不<；div style={{backgroundColor:"；black"；}}}></部门>；渲染黑色，但<；div style={{backgroundColor:"；black"；}}}>；你好</部门>；不'；T

我正在努力学习React.JS，有件事让我大吃一惊

我有一个标题组件：

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

类头扩展组件{
render（）{
返回；
}
}

我正在我的App.js中调用：

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

函数应用程序（）{
返回；
}

当代码保持这种状态时，我的网页上不会显示任何内容。但如果我将标题组件更改为：

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

类头扩展组件{
render（）{
返回Hi；
}
}

我的网页顶部有一条黑线

---

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

你的标题没有高度，因此在没有文本的情况下，它的高度为0px，因此你看不到背景色，如果您将文本添加到标题，它会拉伸以适应文本，因此它会自动获得高度，这就是为什么您会看到后面的背景

---

如果您想要一个黑色背景的空标题，请尝试编辑@Kayden van Rijn提到的代码，如下所示

style={{{backgroundColor:“black”，height:“32px”}

原因如下：

div

不是一个自动关闭标记，即不能像

那样使用它，而必须将其用作

空的

div

没有高度，因此没有可添加背景色的内容

要解决这个问题，你必须

向div添加指定高度的样式，例如

高度：“32px”

要查看文本，您必须更改文本的颜色，使其可见，例如

颜色：“白色”，背景颜色：“黑色”

返回Hi；

尝试将样式更改为style={{backgroundColor:“black”，height:“32px”}看起来元素没有高度，因此添加文本后，它将填充组件。看到黑色条的原因是div的文本颜色也是黑色的。要查看文本，请在样式中添加颜色：“白色”。您希望发生什么？除非你特别告诉它，否则div的高度不会超过它的内容。在第一个示例中没有看到任何内容，因为div没有内容，因此其高度为0。在第二个示例中，您看到了一条黑线，因为添加了单词“Hi”，这使得div变得足够大，可以显示单词“Hi”。要添加到@phishfordead，文本不可见，因为它是黑色的。@StianPoisson没问题，请查看W3Schools提供的React样式指南，以获取更多信息@KaydenvanRijn我根本没有解释文本不可见的原因。我正在解释为什么OP在他的div中添加了“Hi”一词时看到了一条黑线。仅仅因为文本看起来“看不见”，因为它是黑色的，并不意味着div不会增长以适应文本。

return <div style={{ height: "32px", color: "white", backgroundColor: "black" }}> Hi</div>;