如何基于接收的数值为七段LED数码管元素添加对应className？

实现方案 #

核心修改点 #

• 先修复switch逻辑的类型匹配问题：原有代码中switch判断的是数值类型的3，但case值为字符串类型，会导致匹配失败走默认逻辑，需要统一类型。
• 为每一段的className添加动态判断逻辑：如果当前段的标识存在于disabledSegments数组中，就追加segment-disable禁用类。

修改后完整组件代码 #

function App() {  
  let disabledSegments = [];
  // 统一转成字符串匹配，避免类型不匹配问题
  switch(String(3)) {
    case '1':
        disabledSegments = ['segment-a', 'segment-d', 'segment-e', 'segment-f', 'segment-g']
        break;
    case '2':
        disabledSegments = ['segment-c', 'segment-f'];
        break;
    case '3':
        disabledSegments = ['segment-e', 'segment-f'];
        break;
    default:
        break;
  }

  // 封装辅助函数，简化className判断逻辑，避免重复代码
  const getSegmentClass = (segmentName) => {
    return `segment ${segmentName} ${disabledSegments.includes(segmentName) ? 'segment-disable' : ''}`
  }

  return(
    <div className="led-number">
      <div className={getSegmentClass('segment-a')}>
        <svg width="69" height="15" viewBox="0 0 69 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14.269 14.8295H54.5517L68.4885 1.59469C67.1985 0.597612 65.5846 3.8147e-06 63.8301 3.8147e-06H4.63794C2.89411 3.8147e-06 1.29303 0.589094 0.00726318 1.57233L14.269 14.8295Z" fill="#262A34"/>
        </svg>
      </div>
      
      <div className={getSegmentClass('segment-b')}>
        <svg width="17" height="65" viewBox="0 0 17 65" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.624405 14.2662V55.4704L12.2954 64.2173C14.77 62.9539 16.4669 60.3866 16.4669 57.4177V5.62484C16.4669 3.80751 15.8299 2.14251 14.7721 0.832241L0.624405 14.2662Z" fill="#262A34"/>
        </svg>
      </div>

      <div className={getSegmentClass('segment-c')}>
        <svg width="17" height="65" viewBox="0 0 17 65" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M0.624405 50.7207V9.51645L12.2954 0.769611C14.77 2.03407 16.4669 4.60029 16.4669 7.56917V59.3621C16.4669 61.1783 15.8299 62.8433 14.7721 64.1557L0.624405 50.7207Z" fill="#262A34"/>
        </svg>
      </div>
  
      <div className={getSegmentClass('segment-d')}>
        <svg width="69" height="15" viewBox="0 0 69 15" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M14.269 0.169458H54.5517L68.4885 13.4053C67.1985 14.4003 65.5846 15 63.8301 15H4.63793C2.8941 15 1.29302 14.4088 0.00725555 13.4256L14.269 0.169458Z" fill="#262A34"/>
        </svg>
      </div>
      
      <div className={getSegmentClass('segment-e')}>
        <svg width="16" height="65" viewBox="0 0 16 65" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.71614 64.1944C0.644493 62.8799 0 61.2032 0 59.3741V7.58124C0 4.61236 1.69695 2.04614 4.17155 0.781677L15.8425 9.52852V51.064L1.71614 64.1944Z" fill="#262A34"/>
        </svg>
      </div>

      <div className={getSegmentClass('segment-f')}>
        <svg width="16" height="65" viewBox="0 0 16 65" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M1.71614 0.815502C0.644493 2.1311 0 3.80888 0 5.63687V57.4298C0 60.3986 1.69695 62.9659 4.17155 64.2293L15.8425 55.4825V13.947L1.71614 0.815502Z" fill="#262A34"/>
        </svg>
      </div>

      <div className={getSegmentClass('segment-g')}>
        <svg width="63" height="17" viewBox="0 0 63 17" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M51.4494 0.390018H11.0175L0.249847 8.32726L11.0175 16.2656H26.4329H36.034H51.4494L62.217 8.32726L51.4494 0.390018Z" fill="#262A34"/>
        </svg>
      </div>
    </div>
  )
}

逻辑说明 #

当前硬编码数值为3的情况下，e、f段会被自动添加禁用类变为灰色，显示效果和预期的数码管3完全一致。后续如果要改成动态数值，把switch里的固定值替换成组件接收的props或者内部状态变量即可。

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