如何避免React组件SpinnerWrapper的children提前求值？

问题根源 #

你当前的组件里，children的类型是React.ReactNode，这种情况下不管condition是true还是false，传入的子元素都会在组件渲染前被提前计算。所以当isLoading为true时，some.api.data还没加载完成，自然会触发undefined错误。而直接写条件渲染时，只有当条件不成立才会渲染some.api.data，因此不会出现问题。

解决办法：将children改为函数类型 #

修改组件的Props定义，让children接收一个无参函数（返回ReactNode），这样只有当condition为false时，才会调用这个函数来渲染子元素，彻底避免提前求值的问题。

修改后的组件代码 #

type Props = {
  condition: boolean;
  children: () => React.ReactNode;
};

export const SpinnerWrapper = ({ condition, children }: Props) => {
  return condition ? <Spinner /> : <>{children()}</>;
};

调用方式调整 #

使用组件时，把原来的子元素放在一个函数里传递：

<SpinnerWrapper condition={isLoading}>
  {() => <>{some.api.data}</>}
</SpinnerWrapper>

这样只有当isLoading为false时，才会执行函数并渲染some.api.data，既解决了加载状态下的报错问题，也完美实现了条件渲染逻辑的抽象。

这种把children作为函数传递的写法，在React里叫render props模式，专门用来处理这类需要延迟渲染逻辑的场景。

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