React定价计划映射中如何添加条件隐藏空li的图标

方案1：渲染前过滤空内容项 #

在映射生成列表前，先对每个计划的功能数组做过滤，只保留有有效内容的项，直接跳过空项的渲染：

// 组件渲染部分示例
pricingPlans.map(plan => (
  <div key={plan.name} className="pricing-card">
    <h3>{plan.name}</h3>
    <ul>
      {/* 过滤掉内容为空的功能项 */}
      {plan.features
        .filter(feature => feature.text?.trim() !== "")
        .map((feature, index) => (
          <li key={index}>
            <span className="icon">{feature.icon}</span>
            <span>{feature.text}</span>
          </li>
        ))}
    </ul>
  </div>
))

方案2：在li内针对图标加条件判断 #

如果需要保留li标签但仅隐藏图标，可在渲染图标时添加判断逻辑：

{plan.features.map((feature, index) => (
  <li key={index}>
    {/* 仅当内容不为空时渲染图标 */}
    {feature.text?.trim() && <span className="icon">{feature.icon}</span>}
    <span>{feature.text}</span>
  </li>
))}

如果想完全隐藏空li，也可以给空项加样式类，通过display: none隐藏：

.empty-li { display: none; }

对应jsx里给空项加类：

<li key={index} className={!feature.text?.trim() ? "empty-li" : ""}>
  {/* 图标和内容渲染逻辑 */}
</li>

补充说明 #

• 用trim()是为了排除纯空格的无效内容，避免误判；
• 如果你的功能数组是直接存字符串（而非带icon和text的对象），过滤逻辑改为filter(item => item.trim() !== "")即可，图标可根据需要统一配置或单独绑定。

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