ReactJS中props为空时如何为组件设置默认背景色值

• 需求：组件背景色需要同时支持props传入自定义值、未传值时自动应用默认背景色
• 现有问题：从Storyblok CMS对应字段获取字符串类型的bgColor属性值时，如果没有在CMS后台配置该字段的默认值，props为空的情况下组件会直接透出页面本身的背景色，不符合预期
• 原有实现代码：
  基础组件文件：

import React from "react";
import { Box, Grid } from "@chakra-ui/react";

type SolutionListProps = {
  bgColor: string;
};
const SolutionsList: React.FC<SolutionListProps> = ({  
  bgColor, 
  children, }) => (
  <Box px={5} pt={[10, 20, 120]} pb={[12, 20, 120]} bg={bgColor}> // here I want use it
    <Grid maxW={1170} mx="auto" gap={{ base: 16, md: 32 }}>
      {children}
    </Grid>
  </Box>
);

export default SolutionsList; 

Storyblok对接层文件：

import React from "react";
import { ReactStoryblokComponent } from "@/types/storyblok";
import { StoryblokComponent } from "storyblok-js-client";
import SolutionsList from "@/components/SolutionsList";
import { renderBody } from "@/sb-utils/renderBody";

const StoryblokSolutionsList: ReactStoryblokComponent<Blok> = ({ blok }) => (
  <SolutionsList bgColor={blok.bgColor}>{renderBody(blok.solutions)}</SolutionsList>
);

type Blok = {
  solutions: StoryblokComponent<string>[];
  bgColor: string;
};

export default StoryblokSolutionsList;

核心要覆盖两个异常场景：

1. 上层完全没传bgColor属性的情况，直接触发组件内置默认值
2. CMS配置时字段留空，返回空字符串""的情况——这种场景下JS会判定空串为有效值，不会触发解构默认值，需要额外做值转换兜底

修改后的基础组件代码 #

import React from "react";
import { Box, Grid } from "@chakra-ui/react";

// 将bgColor、children标记为可选属性
type SolutionListProps = {
  bgColor?: string;
  children?: React.ReactNode;
};
const SolutionsList: React.FC<SolutionListProps> = ({  
  // 配置默认背景色，将white替换为你实际需要的默认色值即可，支持Chakra内置色、十六进制、rgba等格式
  bgColor = "white", 
  children, 
}) => (
  // 空值合并兜底，兼容null/undefined场景，如果需要兼容空字符串可以改成 bg={bgColor || "white"}
  <Box px={5} pt={[10, 20, 120]} pb={[12, 20, 120]} bg={bgColor ?? "white"}>
    <Grid maxW={1170} mx="auto" gap={{ base: 16, md: 32 }}>
      {children}
    </Grid>
  </Box>
);

export default SolutionsList; 

修改后的Storyblok对接层代码 #

import React from "react";
import { ReactStoryblokComponent } from "@/types/storyblok";
import { StoryblokComponent } from "storyblok-js-client";
import SolutionsList from "@/components/SolutionsList";
import { renderBody } from "@/sb-utils/renderBody";

const StoryblokSolutionsList: ReactStoryblokComponent<Blok> = ({ blok }) => (
  // 将CMS返回的空字符串转为undefined，触发组件内部的默认值逻辑
  <SolutionsList bgColor={blok.bgColor || undefined}>{renderBody(blok.solutions)}</SolutionsList>
);

// 同样将bgColor标记为可选属性，兼容CMS未配置该字段的场景
type Blok = {
  solutions: StoryblokComponent<string>[];
  bgColor?: string;
};

export default StoryblokSolutionsList;

• 代码里的默认色值white仅为示例，替换成项目实际需要的背景色即可
• 如果业务场景下确定CMS不会返回空字符串，只保留组件解构默认值也能满足需求，加空值转换是为了覆盖CMS后台字段留空的常见操作场景

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