javascript - 如果父属性评估为真，如何只渲染子组件

Question

我们有大量的条件逻辑，只需要在数据存在时显示一些内容。所以很多逻辑看起来像这样(简化版):

 { 
    users
    && 
    <span>{user.length}</span>
 }

所以我创建了一个组件，它只在 prop 评估为 true 时才渲染子组件，如下所示:

const If = ({truthy, children}) => (
  truthy ? <>{children}</> : null
)

在实践中看起来像这样:

<If truthy={users}>
  {users.length}
</If>

但是，这是行不通的，我终究无法弄清楚原因。

如果用户未定义，我得到 Cannot read property 'length' of undefined，这意味着首先评估子项。这就是 React 中应该发生的事情吗？我能做些什么来解决这个问题吗？

Answer 1

这里的问题是内容(在本例中为 children)无论如何都会被求值，所以当您想要访问可能为 null 的对象的内部属性时，该条件并不是很有帮助/未定义。

我写了一个similar library , 但它也缺少此功能。