计算X到Y的完成百分比，使用JS实现论坛徽章动态渐变背景填充

你可以按照如下步骤实现动态百分比计算：

1. 计算进度百分比 #

你当前的徽章要求发帖数落在5~10区间，因此可以先抽离区间上下限常量，再按公式计算完成度，同时做边界校验避免异常值：

// 抽离区间常量，后续修改徽章规则时直接调整即可
const MIN_POSTS = 5
const MAX_POSTS = 10
// 计算进度，Math.max/Math.min用于边界保护，避免出现负数或超过100%的异常值
const progress = Math.min(Math.max((userPosts - MIN_POSTS) / (MAX_POSTS - MIN_POSTS), 0), 1)
// 转换为百分比字符串
const percentage = `${Math.round(progress * 100)}%`

2. 动态拼接渐变样式 #

注意JSX的style属性接受的是对象格式，而非字符串，需要调整你原有写法：

if (userPosts >= MIN_POSTS && userPosts <= MAX_POSTS ) {
  const bgStyle = {
    background: `-webkit-linear-gradient(left, #efe3af ${percentage}, #ffffff ${percentage})`
  }
  vnode.children.push(
    <span className="auto-badge" style={bgStyle}>
      <i className={tierOne} />
      First Badge Text
    </span>
  );
}

补充说明 #

• 如果后续有其他档位的徽章，只需要修改MIN_POSTS和MAX_POSTS两个常量即可复用这套逻辑
• 原代码中<i>标签的class属性在JSX语法中需要改为className，避免控制台抛出属性异常警告

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