React+TypeScript：随机变量赋值div样式时出现未赋值报错求助

报错原因很明确：divSize只在boxxy != null的分支里定义，当boxxy为null时，这个变量根本没被创建，直接在return的JSX里引用就会触发TS的未赋值检测。

修复步骤： #

• 提前初始化divSize，给一个默认值，确保无论boxxy是否为null，变量都存在
• 处理boxxy为null的场景，比如返回空或者默认尺寸的元素
• 把var换成let/const，避免变量提升带来的潜在问题

修改后的代码： #

function createRandomRectangle(){
  // 提前初始化默认尺寸，避免if分支不执行时变量未定义
  let divSize = 100;
  let posX = 0;
  let posY = 0;

  if (boxxy != null) {
    divSize = Math.round(((Math.random()*200) + 50));
    const width = boxxy.offsetWidth;
    const height = boxxy.offsetHeight;
    posX = Math.round((Math.random() * (width - divSize)));
    posY = Math.round((Math.random() * (height - divSize)));
  }

  // 如果boxxy为null，返回null避免渲染无效元素
  if (!boxxy) return null;

  return(
    <div 
      className='Rectangle' 
      style={{
        width: `${divSize}px`,
        height: `${divSize}px`,
        position: 'absolute', // 要使用posX/posY需添加定位属性
        left: `${posX}px`,
        top: `${posY}px`
      }}
    ></div>
  )
}

额外说明： #

• 样式里的宽高要加上px单位，否则浏览器无法正确识别数值
• 若要让posX和posY生效，必须给div添加定位属性（比如position: absolute）
• 当boxxy为null时返回null，符合React组件的返回规则，也不会渲染无意义的空元素

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