如果动态生成的列表项为空，则反应组件不显示

Question

我有一个反应组件，其中包含使用地图创建的子组件列表：

var listItems = model.arrayItems.map(function(item) {
    return(<ChildComponent item={item}></ChildComponent>)
}, this);

然后组件的渲染函数添加以下子组件列表：

return (
    <div>
        <h1>My items:<h1>
        <ul>{listItems}</ul>
    </div>
);

问题是当 listItems 为空时，反应组件没有显示在我的浏览器中。但是，如果我调整浏览器 window 的大小，该组件就会显示出来。有人对可能导致此行为的原因有任何建议吗？

Answer 1

原来是 ChildComponent 的问题。事实上，这似乎是一个 CSS 问题。

ChildComponent 本身有一组嵌套的动态生成的列表项。这些孙组件的 CSS 属性宽度设置为 100%。将此属性更改为 "auto" 解决了问题。

我的理解是，当转换到顶级列表为空的状态时，考虑到 React 管理未安装组件的方式，孙组件的 CSS 样式为 100%（父元素的) 以某种方式混淆了浏览器的渲染，因为它的父组件不再被挂载。如果有人更深入地了解这种行为的原因，很高兴听到更深入的解释。

React component not displaying if dynamically generated list items empty