如何逐个渲染组件?

Question

我想限制父容器组件可以容纳的组件数量。

假设我有一个项目容器，用于渲染数十个Item组件。容器的高度限制为220px，每个Item的高度为50px(为了简单起见，此示例 - 实际代码将具有不同高度的Item(。

使用 React，我想限制容器可以容纳的Item组件的数量，相对于它的高度。因此，在将每个Item放入容器之前，我需要验证容器是否溢出，如果是，则停止将更多项目渲染到其中。

我使用以下代码来实现此目的：

const [canRender, setCanRender] = useState(true);
useEffect(() => {
const parent = ref.current.parentElement;
setCanRender(parent.clientHeight <= parent.scrollHeight);
}, []);

在给定的示例中，只应呈现 3 个 Item 组件，因为容器无法容纳更多组件。 我的问题是 React 会立即渲染所有组件(由于状态未同步设置？

点击查看模拟示例

如何有条件地逐个渲染Item组件并检查容器溢出？

Answer 1

只需将项目呈现逻辑移动到 app.js。

工作演示在这里

应用程序.js(编辑：优化的代码(

export default function App() {
const [count, setCount] = useState([]);
const ref = useRef(null);
useEffect(() => {
if (ref.current.clientHeight >= ref.current.scrollHeight) {
setCount(item => [...item, <Item key={Math.random()} />]);
}
}, [count]);
return (
<div ref={ref} className="container">
{count}
</div>
);
}

项目.js

const Item = () => {
return <div className="bar">Bar</div>;
};
export default Item;

附言：考虑不要对键使用 math.random