如何访问箭头函数内部变量？含组件传参场景问询

你的需求完全可行，问题出在当前score是getScore函数的局部变量，外部作用域根本访问不到它。下面给你两种实用的解决办法：

方案一：让函数返回包含score和等级的对象 #

修改getScore，让它同时返回计算出的分数和对应的等级文本，这样外部就能拿到score值：

const getScore = () => {
  const score = Math.round((met / total) * 100);
  let scoreLevel;
  
  if (score <= 33) {
    scoreLevel = BAD_SCORE;
  } else if (score <= 67) {
    scoreLevel = OKAY_SCORE;
  } else if (score < 100) {
    scoreLevel = GOOD_SCORE;
  } else if (score === 100) {
    scoreLevel = PERFECT_SCORE;
  }
  
  return { score, scoreLevel }; // 返回包含两个值的对象
};

// 使用示例
const { score, scoreLevel } = getScore();
console.log('等级文本:', scoreLevel);
console.log('分数:', score);
// 把score作为props传给子组件
<ChildComponent score={score} />

方案二：将score提升到外部作用域计算 #

如果score需要在多个地方使用，没必要把它封在函数里，可以直接在外部计算：

// 先计算score，放在外部作用域
const score = Math.round((met / total) * 100);

const getScore = () => {
  if (score <= 33) {
    return BAD_SCORE;
  } else if (score <= 67) {
    return OKAY_SCORE;
  } else if (score < 100) {
    return GOOD_SCORE;
  } else if (score === 100) {
    return PERFECT_SCORE;
  }
};

console.log('等级文本:', getScore());
console.log('分数:', score);
// 传递给子组件
<ChildComponent score={score} />

两种方案选哪种看你的实际场景：方案一更保持封装性，适合score只在getScore里计算的情况；方案二更灵活，适合需要多处复用score值的场景。

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