除非将文本添加到 div，否则 React JS (JSX) div 不会呈现答案

【问题标题】：React JS (JSX) div not rendering unless text is added to div除非将文本添加到 div，否则 React JS (JSX) div 不会呈现
【发布时间】：2018-01-22 22:18:29
【问题描述】：

我正在尝试使用样式在 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>

如何纠正这个问题并将图像渲染到屏幕上？

【问题讨论】：

通常在 HTML 中，我们只需添加一个宽度和高度参数，例如：
。确保 w/h 与图像匹配，以便绘制整个图像。如果没有 w/h 参数，您的浏览器会假定 div 为空并且不会绘制它。
请注意，这是内联样式，会使编辑 HTML 变得非常困难。我建议在 CSS 中创建一个设置宽度（和/或高度）的类（如“宽度：100 像素；高度：100 像素；”），并将其包含在您的 div 中，如
。在我最后一个问题的时间用完后，我忘记了这一点。

标签： javascript jquery html css reactjs

【解决方案1】：

没有内容和宽度高度的 div 将不会呈现。您可以在这里有两种方法：

将&nbsp; 放在 div 中（当您不想定义宽度/高度时）

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

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

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

【讨论】：

添加 div 内部只呈现图像的一小部分。我看到的唯一选择是使用 jquery 根据高度来获取窗口的大小，然后手动分配高度
图像大小应该是图像本身样式的一部分，而不是 div
图像需要根据窗口大小改变大小，因此我无法在样式中指定大小
然后你可以定义以%为单位的高度和宽度，因此取决于窗口大小
不幸的是，在我的情况下使用 %'s 似乎不起作用。用一些简单的 jquery 修复了这个问题

【解决方案2】：

尝试将高度样式设置为这样的 div

const heroImageStyling = {
  backgroundImage: `url(${heroImage})`,
  height: 300px,
};

【讨论】：

【解决方案3】：

通过使用jquery手动给div标签添加height属性来获取窗口高度解决

let screenHeight = $(window).height() + "px";

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

【讨论】：

你能用100vh 来维护分离的样式和JS吗？
使用 100vh 作为高度属性似乎也没有渲染任何内容。到目前为止唯一有效的方法是将图像的高度设置为像素。