Реагировать компонент не отображается, если динамически сгенерированные элементы списка опорожнить

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 пуст. Однако, если я изменил размер окна браузера, компонент появится. Кто-нибудь имеет какие-либо советы о том, что может вызвать такое поведение?

Answer 1

Так получилось, что это проблема с ChildComponent. На самом деле, похоже, это проблема CSS.

Сам ChildComponent имел вложенный набор динамически сгенерированных элементов списка. Эти компоненты внуков имели свойство CSS для ширины, установленной на 100%. Изменение этого свойства на «авто» устранило проблему.

Я понимаю, что при переходе к состоянию, в котором список верхнего уровня пуст, и учитывая, что React управляет размонтированными компонентами, стиль CSS компонента внука 100% (родительского элемента) каким-то образом смущает браузеру поскольку его родительский компонент больше не монтируется. Если кто-нибудь знает причину такого поведения более подробно, было бы здорово услышать более глубокое объяснение этого.