替代我的 React 组件中的嵌套三元表达式以有条件地传递 prop 值

Question

基于某个类型字段（来自 api），我必须有条件地通过 prop 将字符串值发送到我的 React 子组件。

const labelOne = 'Label one';
const labelTwo = 'Label two';
const LabelThree = 'Label three';

return (

        <Child
          items={data?.items?.map((node) => ({
            labelText: node.type.includes('One')
              ? labelOne
              : node.type.includes('Two')
              ? labelTwo
              : node.type.includes('Three')
              ? LabelThree
              : '',
          }))}
        />
  );

但是我的 Eslint 不喜欢超过 2 个三元表达式。

Do not nest ternary expressions.

在这种情况下有什么替代方案？

更新：

我添加了一个功能：

const renderText = (type) => {
    let myText;

    switch (type) {
      case type.includes(Type.One):
        myText = 'Text one';
        break;
      case type.includes(TeaserType.Two):
        myText = 'Text two';
        break;
      case type.includes(TeaserType.Three):
        myText = 'Text three';
        break;
      default:
        break;
    }
    return ctaText;
  };

然后在我的子组件中我有：

<Child myText: renderText(node.type) />

我正在使用打字稿。对于我的 myText 道具，我输入如下：

myText?: () => void;

但是当我记录它时，它 returns 未定义？

Answer 1

您可以提取一个函数并使用 if else

Answer 2

第 1 步：定义此函数

const typeQuery = (type)=>{ 
switch (type) {
      case "Label one":
        return LabelOne
        break;
      case "Label two":
        return LabelTwo
        break;
      case "Label three":
        return LabelThree
        break;
      default:
        return null
        break;
    }
}

第 2 步：像这样更改代码

    <Child
          items={data?.items?.map((item) =>typeQuery(item.type) }
        />

看起来工作量有点大，但如果您获得更多类型，语法会更简洁，可扩展性也会更高。

Answer 3

如果您只是根据属性数据映射文本并且不需要运行任何额外的逻辑，我建议使用常规 json对象映射选项。

前


    const labelMap= {
      "one": "Label one",
      "two": "Label two",
      "three":"Label three"
    }
    
    return (
    
        <Child
          items={data?.items?.map((node) => ({
            labelText: labelMap[node.type]
          }))}
        />
    
      );

与使用带有 if/else/switch.

的函数相比，样板代码要少得多，性能要好一些（尽管可以忽略不计）

替代我的 React 组件中的嵌套三元表达式以有条件地传递 prop 值

Alternative to nested ternary expressions in my React component to pass prop value condionally

reactjs

conditional-statements

react-props

conditional-operator