javascript - React JS (JSX) div 不渲染，除非将文本添加到 div

Question

我正在尝试使用样式在 div 标签内渲染图像，因为我希望图像根据窗口的大小动态调整大小。

这是 JSX 代码

const heroImage = "pathToImage";

const heroImageStyling = {
  backgroundImage: `url(${heroImage})`
};

ReactDOM.render(
  <div style={heroImageStyling}></div>,
  document.getElementById("root")
);

运行此命令不会在页面上呈现任何内容

如果像这样将文本添加到 div 标签，则图像的一小部分将渲染到屏幕上(与文本高度相同的长条)

<div style={heroImageStyling}>Test Text</div>

如何解决此问题并将图像渲染到屏幕上？

Answer 1

没有内容和宽度高度的div将不会渲染。您可以在这里采用两种方法:

1. 输入  div 内部(当您不想定义宽度/高度时)

ReactDOM.render(
<div style={heroImageStyling}>&nbsp;</div>,
document.getElementById("root")
);

在 div 样式中定义宽度或高度或两者

const heroImageStyling = {
backgroundImage: url(${heroImage}) ,
height: 200px,
width: 200px
};
ReactDOM.render(
<div style={heroImageStyling}></div>,
document.getElementById("root")
);