javascript - Javascript 中的复杂函数组合

Question

我目前有这个功能，我利用文件来处理许多不同的情况，在这些情况下，它被用来为单元格提供某些颜色。

• 输入值示例

    "classes": {
        "head": "Component-head-249",
        "body": "Component-body-250"
    },
    "shadedline": "true",
    "label": "scheduleToExit",
    "shadedcell": "",
    "children": "09/17/2021 22:00 CT- in 3 days"
}
{
    "classes": {
        "head": "Component-head-249",
        "body": "Component-body-250"
    },
    "shadedline": "false",
    "label": "protectedInField",
    "shadedcell": "",
    "children": "true"
}

这是我当前的代码，我正在尝试实现它以填充具有某些颜色的单元格但它似乎没有达到那个级别。

// Helper for getCellShade to get shadedCell based of specific color
const getBgColorlabelShadedCell = (bg: string, color: string) => ({
  textDecoration: 'underline',
  backgroundColor: bg,
  color: color || 'black',
  fontWeight: 700,
  fontSize: 16,
  marginTop: 1,
  marginBottom: 1
});
// Helper for getCellShade to get general styling
const getGeneralBgColor = (bg?: string, fw?: number) => ({
  backgroundColor: bg || 'rgba(225, 228, 234,0.45)',
  fontWeight: fw || 400
});
// get cell shade color for general part of application where tables are present
const getCellShade = (props: any) => {
  if (props.header) return getGeneralBgColor(undefined, 600);
  else if (props.backgroundColor && props.label === props.shadedcell)
    return getBgColorlabelShadedCell(props.backgroundColor, props.color);
  else if (props.shadedline + '' !== 'false' || props.shadedline === 'true')
    return getGeneralBgColor();
  else if (props.customColor) {
    const style: any = getGeneralBgColor(props.customColor, 600);
    props.customColor === ('green' || 'blue' || 'red') &&
      (style.color = 'white');
    return style;
  } else if (props.shadedcellred) return getCellShadeColor('#fe001c');
  else if (props.shadedcellpink) return getCellShadeColor('#fce3f4');
  else if (props.shadedcellyellow) return getCellShadeColor('#f6ea00');
  else if (props.shadedcellgreen) return getCellShadeColor('#00833a');
  else return getGeneralBgColor('transparent');
};

这是有效的原始功能，但我正在尝试将其合并到上面的可重用功能中。

const getCellShade: any = (props: any) => {
  if (props.customColor) {
    const style: any = {
      backgroundColor: props.customColor,
      fontWeight: 600
    };
    if (
      props.customColor === 'green' ||
      props.customColor === 'blue' ||
      props.customColor === 'red'
    ) {
      style.color = 'white';
    }
    return style;
  } else if (props.header) {
    return { backgroundColor: 'rgba(225, 228, 234,0.5)', fontWeight: 600 };
  } else if (props.shadedline) {
    return { backgroundColor: 'rgba(225, 228, 234,0.25)' };
  } else {
    return { backgroundColor: 'transparent' };
  }
};

阴影单元格仅获得第一个条件满足，而不是通过整个函数此外，任何代码改进也非常感谢

标签： javascriptreactjsdatabasealgorithmobject