React TS中类方法isEmpty返回undefined，直接写条件却正常工作？

我需要渲染一个包含文件和子文件夹的目录，当目录为空时渲染EmptyFolder组件。我的FolderDTO类定义如下：

import { NoteDTO } from "../Note/NoteDTO";

export class FolderDTO {
    id: number;
    name: string;
    subFolderIds: number[];
    subFolderNames: string[];
    notes: NoteDTO[];

    constructor(id: number) {
        this.id = id;
        this.name = '';
        this.subFolderIds = [];
        this.subFolderNames = [];
        this.notes = [];
    }

    isEmpty(): boolean {
        return this.notes.length === 0 && this.subFolderIds.length === 0;

    }
}

用{folder?.isEmpty && <EmptyFolder />}做条件渲染时，EmptyFolder不渲染，且isEmpty输出为undefined；但把判断逻辑直接写进条件{folder?.notes.length === 0 && folder.subFolderIds.length === 0 && <EmptyFolder />}时，组件能正常显示。明明逻辑完全一样，为什么通过类方法就不行？

• 核心问题：未调用方法，仅访问了方法引用
  folder?.isEmpty只是获取了类方法的函数引用，并没有执行它。React条件渲染中，函数引用属于真值（非空对象），但因为没执行方法，不会返回true/false，反而会尝试渲染函数对象，自然无法触发EmptyFolder，你看到的undefined就是未执行方法导致的结果。

• 正确写法：调用isEmpty方法
  把代码改成{folder?.isEmpty() && <EmptyFolder />}，加上括号执行方法，就能拿到正确的布尔值判断，正常触发EmptyFolder的渲染。

• 直接写逻辑可行的原因
  直接写folder?.notes.length === 0 && folder.subFolderIds.length === 0时，是直接计算布尔表达式，得到的是明确的true或false，符合React条件渲染的要求，所以能正常工作。

内容的提问来源于stack exchange，提问作者Vled