React如何将组件运行时数据传递给HOC实现通用加载错误处理

推荐方案1：通用包装组件（最灵活易维护） #

这是当前React函数组件场景下最符合直觉的实现方式，将通用的loading/error判断逻辑封装到独立组件中，只需要把请求返回的状态作为参数传入即可：

// 通用封装组件，可全局复用
const QueryLoader = ({ loading, error, data, children }) => {
    if (loading) return <Loader />;
    if (error) return <Error />;
    if (data) return children;
    return null;
};

业务组件使用方式：

const Dashboard = () => {
    const { data, loading, error } = useGetDashboardDataQuery();
    return (
        <QueryLoader loading={loading} error={error} data={data}>
            {/* 组件特有的渲染逻辑，只有data存在时才会渲染 */}
            <h2>{data.dashboard_title}</h2>
        </QueryLoader>
    );
};

推荐方案2：高阶组件适配版（如果你更偏好HOC写法） #

你之前的HOC写法问题在于没有把请求钩子的调用放到HOC内部执行，调整后可以通过参数传入业务组件对应的查询钩子，实现逻辑复用：

// 通用HOC封装
const withQueryLoader = (useCustomQuery) => (Component) => {
    return (props) => {
        const { data, loading, error } = useCustomQuery(props);
        if (loading) return <Loader />;
        if (error) return <Error />;
        if (data) return <Component {...props} data={data} />;
        return null;
    };
};

业务组件使用方式：

// 业务组件只需要关注data存在时的渲染逻辑
const Dashboard = ({ data }) => {
    return <h2>{data.dashboard_title}</h2>;
};
// 传入对应业务的查询钩子完成包装
export default withQueryLoader(useGetDashboardDataQuery)(Dashboard);

补充：自定义Hook方案（适合需要额外处理请求状态的场景） #

如果你的业务组件除了渲染内容之外，还需要基于请求状态做其他逻辑处理，可以把判断逻辑封装到自定义Hook中：

// 通用自定义Hook
const useQueryRender = ({ loading, error, data }) => {
    if (loading) return { fallback: <Loader /> };
    if (error) return { fallback: <Error /> };
    return { data, fallback: null };
};

业务组件使用方式：

const Dashboard = () => {
    const queryRes = useGetDashboardDataQuery();
    const { fallback, data } = useQueryRender(queryRes);
    // 可以在这里添加基于请求状态的其他逻辑
    if (fallback) return fallback;
    return <h2>{data.dashboard_title}</h2>;
};

以上三种方案都不需要提升状态，也不需要感知业务组件的查询钩子具体实现，完全满足抽象复用的需求，同时符合React函数式编程的规范。

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