React组件条件传prop替代嵌套三元及TypeScript返回undefined问题问询

推荐使用匹配规则映射表+匹配函数的方案，易扩展、可读性高，完全规避多层三元的问题：

// 统一维护匹配规则，后续新增规则只需修改该数组
const LABEL_RULES = [
  { matchStr: 'One', label: 'Label one' },
  { matchStr: 'Two', label: 'Label two' },
  { matchStr: 'Three', label: 'Label three' },
] as const;

// 提取匹配逻辑为独立函数
const getLabelText = (type: string) => {
  const matched = LABEL_RULES.find(rule => type.includes(rule.matchStr));
  return matched ? matched.label : '';
};

// 组件中直接使用
return (
  <Child
    items={data?.items?.map(node => ({
      labelText: getLabelText(node.type)
    }))}
  />
);

如果逻辑更复杂也可以用普通的if/else分支判断，同样符合ESLint规则。

你的代码存在4处错误，逐一对应修改即可：

• switch语法使用错误：switch(变量)的case分支会和变量做全等匹配，你switch(type)的case分支都是type.includes()返回的布尔值，type === true/false永远不成立，所有分支都不会命中。如果要坚持用switch，需要改成switch(true)，让case的布尔表达式匹配true值。
• 返回值变量名错误：函数内部定义的存储文本的变量是myText，但你最后return的是未定义的ctaText，自然返回undefined。
• Prop类型定义错误：你传递给myText的是renderText执行后的字符串值，但你定义的Prop类型是() => void函数类型，类型完全不匹配，需要将Prop类型修改为myText?: string。
• Prop传递语法错误：React组件传递Prop的语法是myText={值}，你写的myText: renderText(node.type)语法错误，无法正常传值。

修改后的参考代码：

const renderText = (type: string) => {
  // 改成switch(true)匹配布尔case
  switch (true) {
    case type.includes(Type.One):
      return 'Text one';
    case type.includes(TeaserType.Two):
      return 'Text two';
    case type.includes(TeaserType.Three):
      return 'Text three';
    default:
      return '';
  }
};

// 传参时修正语法
<Child myText={renderText(node.type)} />

// 子组件Prop类型修正
type ChildProps = {
  myText?: string;
}

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