React-谓词功能组件

Question

我创建了一个react功能组件，以基于谓词（而不是在JSX中使用三进制）包装代码段。

因此，组件看起来像这样：

const PredicateWrapper = ({ children, iff, otherwise }) => (
    iff ? children : (otherwise || null)
);

并且可以这样使用：

<PredicateWrapper iff={students}>
   {students.map(student => <Student />)
</PredicateWrapper>

问题是，如果学生为null，则会引发错误“无法读取null的属性映射”。如果我用某些文本替换了students.map，则该文本不会呈现，证明包装器正常工作，但是，包装器的目的是处理student为null的情况，并且我希望它不要“输入”在包装器内。

[iff为假时，如何实现这样的内部代码以免评估并抛出运行时错误？

Answer 1

非常有趣的问题！

我在这里可能会犯错，但是我认为这是因为students.map(student => <Student />仍是当前组件的渲染树的一部分，因此它正在父组件的安装架上执行。之后安装并解析PredicateWrapper，这是iff插入的时间。

例如，如果执行此操作，则不会出现错误

const Child = ({ students }) => {
  return students.map(student => <Student />);
};


<PredicateWrapper iff={students}>
  <Child students={students} />
</PredicateWrapper>