如何在React中传递值为null的prop？

当然可以通过传递propName={null}的方式实现你的需求，这是非常直接且无需额外提取函数的方案，完全符合你的预期！下面分步骤说明怎么做：

1. 调整组件内部的判断逻辑 #

首先，保持你原来的prop默认值为true（这样不传递prop时依然默认显示'tick'），然后在组件内部增加对null值的判断：

示例（React函数组件） #

function StatusText({ showStatus = true }) {
  if (showStatus === null) {
    return null; // 不渲染任何文本
  }
  return <span>{showStatus ? 'tick' : 'untick'}</span>;
}

示例（Vue组件） #

<template>
  <span v-if="showStatus !== null">
    {{ showStatus ? 'tick' : 'untick' }}
  </span>
</template>

<script setup>
const props = defineProps({
  showStatus: {
    type: Boolean,
    default: true
  }
});
</script>

2. 调用组件时的三种场景 #

• 不传递prop：StatusText() → 显示'tick'（使用默认值）
• 传递true：StatusText({ showStatus: true }) → 显示'tick'
• 传递false：StatusText({ showStatus: false }) → 显示'untick'
• 传递null：StatusText({ showStatus: null }) → 不显示任何文本

为什么这个方案可行？ #

绝大多数前端框架（React、Vue等）都允许将null作为prop值传递，并且默认值仅在prop未传递或为undefined时生效。所以当你显式传递null时，组件接收到的prop值就是null，能完美和true/false区分开，实现第三种无文本的状态。

如果之后想扩展状态，也可以考虑用枚举类型（比如'tick' | 'untick' | 'none'），但就你当前的需求来说，null的方案最简洁，完全不需要额外提取函数。

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