如何从React组件返回假值？React组件是否可返回假值？

嘿，咱们来把这两个问题掰扯清楚：

1. React组件能不能返回假值？ #

必须能！React允许组件返回的合法值里，就包含null、undefined、false这些假值类型——除此之外还可以返回React元素、数组、字符串、数字之类的。

不过你示例里的情况得拎明白：

const Foo = () => null;
console.log('Foo', <Foo />);

这里Foo组件内部的返回值确实是null（假值），但<Foo />是编译后的React元素对象，它本身是一个真值对象，这和组件自己返回的内容完全是两码事。你可以把<Foo />理解成“告诉React要渲染这个组件的指令”，而不是组件实际输出的内容。

2. 怎么从React组件返回假值？ #

有几种常用的写法：

• 返回null：这是最直观的方式，用来表示组件不需要渲染任何内容

  const EmptyView = () => null;
  

• 返回undefined：如果组件没有写return语句，或者显式return undefined，React也会把它当作“不渲染内容”处理

  const NoReturnComponent = () => {}; // 隐式返回undefined
  const ExplicitUndefined = () => { return undefined; };
  

• 返回false：一般用在条件渲染里，满足特定条件才渲染内容，不满足就返回false

  const UserGreeting = ({ isLoggedIn }) => {
    if (!isLoggedIn) return false;
    return <div>欢迎回来！</div>;
  };
  

另外要注意，当组件返回这些假值时，React不会在DOM中生成任何节点，这在处理空状态、权限控制这类场景时特别好用。

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