Question

我有一个react组件，其中包含使用map创建的子组件列表：

in

然后组件的渲染功能添加了这个子组件列表：

async def some_func():  # async is used instead of a coroutine decorator
    # Assume SomeObj implements __anext__, __aiter__, __aenter__, and __aexit__
    s = SomeObj()
    async for item in s:  # You can suspend while iterating over s using __anext__
       print(item)

    async with SomeObj() as s: # You can suspend on enter and exit of this context manager using __aenter__ and __aexit__
        await s.some_method() # await is used instead of yield from

问题是当listItems为空时，我的浏览器中没有显示react组件。但是，如果我调整浏览器窗口的大小，组件会显示出来。有没有人对可能导致这种行为的原因有任何建议？

Answer 1

所以它确实是ChildComponent的一个问题。事实上，它似乎是一个CSS问题。

ChildComponent本身有一组嵌套的动态生成的列表项。这些孙组件的宽度设置为100％的CSS属性。将此属性更改为“auto”可修复此问题。

我的理解是，当转换到顶级列表为空的状态，并且给定React管理卸载组件的方式时，孙子组件的100％（父元素）的CSS样式会以某种方式混淆浏览器的呈现因为不再挂载其父组件。如果有人更深入地了解这种行为的原因，那么听听对此的更深入解释将会很棒。

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

1 个答案: