为什么JSX中为条件类元素绑定的内联样式未正常生效

代码存在三处会直接导致内联样式失效的问题：

• JSX内联样式语法写法错误
  JSX的style属性仅能接收单个样式对象，当前写法style={{top:random_number+"%"} , {left:random_number+"%"}}完全不符合语法要求：
  逗号运算符会直接取表达式链的最后一个值，相当于最终传给style的只有{left: random_number + "%"}这一个对象，前面定义的top属性直接被丢弃，根本不会被解析到目标元素上。正确写法是将所有样式属性合并到同一个对象中。
• 随机数变量无持久化能力
  组件顶层声明的let random_number;是普通局部变量，每次组件因状态更新触发重渲染时，函数体从头执行，这行代码会直接把之前在doThings方法中赋值的随机数重置为undefined。最终渲染时，元素拿到的top、left值全是无效的undefined，浏览器自然不会应用对应的定位样式。
• 样式缺少基础定位支撑
  就算top、left的数值能正确传递，只要.circle类的CSS规则里没有配置position: absolute/position: fixed这类定位属性，top、left的设置也完全不会生效——这两个属性仅对已定位的元素有效果。

function App() {
  const [date, setDate] = useState('')
  const [circleBoolean, setCircleBoolean] = useState(false);
  // 将随机数存为独立状态，避免重渲染时丢失赋值
  const [randomNumber, setRandomNumber] = useState(0);

  useEffect(() => {
    // 用空依赖固定定时器，避免因状态更新频繁重建
    const interval = setInterval(() => {
      // 用函数式状态更新规避闭包取值过期问题
      setCircleBoolean(prev => !prev);
      setDate(moment().format('MMMM Do YYYY, h:mm:ss a'));
      setRandomNumber(Math.random() * 100);
    }, 2000);
    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App">
      <div className="bg">
        <div 
          style={{ top: `${randomNumber}%`, left: `${randomNumber}%` }}
          className={circleBoolean ? "circle" : ""} 
        />
        <div className="card">
          <p className="card-info">{date}</p>
        </div>
      </div>
    </div>
  );
}

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