React中如何在if条件中同时返回组件并执行自定义代码？

需求场景 #

现有React代码如下，当placeOrderLoading为true时返回全屏加载指示器组件：

import { fullPageLoadingIndicator } from '../LoadingIndicator';
if (placeOrderLoading){
      return fullPageLoadingIndicator;
}

希望在返回加载组件的同时，执行页面滚动到顶部的操作：

window.scrollTo({
     top: 0,
     behavior: 'smooth'
});

之前尝试的写法存在问题，无法正常运行：

if (placeOrderLoading){
      return {
          window.scrollTo({
            top: 0,
            behavior: 'smooth'
          });
         fullPageLoadingIndicator
      };
}

正确实现方式 #

方法1：直接在return前执行滚动操作 #

在return语句之前调用window.scrollTo，代码会按顺序执行，先完成滚动再返回加载组件：

import { fullPageLoadingIndicator } from '../LoadingIndicator';

if (placeOrderLoading) {
  // 先执行滚动操作
  window.scrollTo({
    top: 0,
    behavior: 'smooth'
  });
  // 再返回加载组件
  return fullPageLoadingIndicator;
}

方法2：使用useEffect监听状态变化（函数组件推荐） #

如果是函数组件，更符合React规范的做法是用useEffect监听placeOrderLoading的变化，当它变为true时触发滚动，避免重复执行或不符合生命周期的操作：

import { useEffect } from 'react';
import { fullPageLoadingIndicator } from '../LoadingIndicator';

// 组件内部添加useEffect
useEffect(() => {
  if (placeOrderLoading) {
    window.scrollTo({
      top: 0,
      behavior: 'smooth'
    });
  }
}, [placeOrderLoading]); // 仅当placeOrderLoading变化时执行

if (placeOrderLoading) {
  return fullPageLoadingIndicator;
}

为什么之前的写法错误 #

• React组件的返回值必须是合法的JSX元素、null或字符串，不能返回普通对象
• return语句中不能直接嵌入执行语句（比如window.scrollTo这种函数调用），代码逻辑需要放在return之前或生命周期钩子中

内容的提问来源于stack exchange，提问作者Ramish Hassan Riaz