React Native：如何通过Props控制secondaryLabel的显示与隐藏

要实现通过布尔值控制secondaryLabel内容的显示/隐藏，你可以按以下步骤调整代码：

1. 更新Props类型定义 #

新增一个布尔型控制属性（比如showSecondaryLabel），用来控制次级标签的显示状态，同时保留原有的secondaryLabel作为内容传入：

type LabelProps = {
  label: string;
  secondaryLabel?: string;
  showSecondaryLabel?: boolean; // 新增布尔控制属性
};

2. 修改组件逻辑 #

在组件中通过条件渲染判断，只有当showSecondaryLabel为true且secondaryLabel存在时，才渲染次级标签：

export function FieldLabel({ secondaryLabel, label, showSecondaryLabel }: LabelProps) {
  return (
    <View>
      <Text>{label}</Text>
      {/* 条件渲染：满足条件时才显示次级标签 */}
      {showSecondaryLabel && secondaryLabel && (
        <Text>{secondaryLabel}</Text>
      )}
    </View>
  );
}

3. 使用示例 #

• 显示次级标签：

<FieldLabel label="主标签" secondaryLabel="次级标签内容" showSecondaryLabel={true} />

• 隐藏次级标签：

<FieldLabel label="主标签" secondaryLabel="次级标签内容" showSecondaryLabel={false} />

另一种可选方案（合并控制与内容） #

如果你希望直接通过secondaryLabel的布尔值控制显示，同时支持传入内容，可以将其类型设为联合类型：

type LabelProps = {
  label: string;
  // 可以传布尔值控制显示，或直接传内容（默认显示）
  secondaryLabel?: string | boolean;
  // 可选：预设默认次级内容
  defaultSecondaryContent?: string;
};

export function FieldLabel({ label, secondaryLabel, defaultSecondaryContent = "默认次级内容" }: LabelProps) {
  let shouldShow = false;
  let displayContent = "";

  if (typeof secondaryLabel === "string") {
    shouldShow = true;
    displayContent = secondaryLabel;
  } else if (secondaryLabel === true) {
    shouldShow = true;
    displayContent = defaultSecondaryContent;
  }

  return (
    <View>
      <Text>{label}</Text>
      {shouldShow && <Text>{displayContent}</Text>}
    </View>
  );
}

使用示例：

• 显示默认次级内容：

<FieldLabel label="主标签" secondaryLabel={true} />

• 显示自定义次级内容：

<FieldLabel label="主标签" secondaryLabel="自定义次级内容" />

• 隐藏次级标签：

<FieldLabel label="主标签" secondaryLabel={false} />

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