我想在React中实现一个条件渲染的组件，但没有成功，我到底哪里做错了？

前端开发 2026-07-10

我有这样的代码，它能工作：

{(users.length === 0) ? (<></>) : (
    <Pagination
        sx={{ mt: '1rem' }}
        page={page}
        count={pagination.last_page}
        onChange={handleChangePage} />
)}

但我想要像这样：

const MyComponent = () => {
    return (
        <HideIf condition={users.length === 0}>
            <Pagination
                sx={{ mt: '1rem' }}
                page={page}
                count={pagination.last_page}
                onChange={handleChangePage} />
        </HideIf>
    );
}

const HideIf = ({condition, children}) => {
    if(condition){
        return ( <></> );
    } else {
        return (
            <>{children}</>
        );
    }
}

使用这种形式时，它给了我如下错误

无法读取null的属性（读取 'last_page'）

即使条件为假，它也在读取分页组件吗？

解决方案

如果你这样做：

<Parent>
  <Child a={thing.a} />
</Parent>

那么就会创建一个组件树（父组件和子组件）。用于 Child 的props会在创建树的过程中被收集并求值，因此 thing 必须有一个值，因为 Child 是在树中无条件地的一部分。

这在进行任何渲染之前就会发生。即使父组件决定不渲染它的子组件也没有区别。

顺便说一句，这是我在代码中处理这种情况的方式——不增加额外的组件，在布尔逻辑和组件代码之间只有一个 &&：

{(users.length > 0 && pagination) &&
  <Pagination
    sx={{ mt: '1rem' }}
    page={page}
    count={pagination.last_page}
    onChange={handleChangePage} />
}

如果在 && 之前的部分为false（或类似于false的表达），那么其后面的部分永远不会被求值。整个表达的结果因此也会是false（或类似于false），React不会为此渲染任何内容。

另外，你根本不需要空的片段（<></>），对我来说它们只是噪音，应该避免。如果你觉得你必须放在那里，那么你应该使用 null。

React