Javascript Mobx加载包装器 问题: 编写一个通用组件的最佳方法是什么？该组件将在项目中使用，以便使用Mobx、react和tech堆栈处理加载视图

假设我们正在进行API调用以获取产品列表

当apiStatus正在获取时，我们将呈现loadingview

当apiStatus为success时，我们将呈现success视图，即产品列表

当apiStatus由于服务器错误或internet故障而失败时，我们将使用重试按钮呈现failureview

拟议解决办法1：

//加载wrapperWithFailure.js
@观察者
类LoadingWrapperWithFailure扩展了React.Component{
render（）{
const{apiStatus，apirerror，children，onRetry}=this.props；
开关（API状态）{
案例API_获取：
//加载状态
返回；
成功案例：
//成功状态
返回儿童；
案例API_失败：
//失败状态
返回；
违约：
返回null；
}
}
}

//用法
@观察者
类ProductList扩展了React.Component{
render（）{
常数{
蜂王地位，
一个错误，
产品列表，
onRetryApi
}=this.props.productStore；
返回(
{/*在apicall成功时呈现productList*/}
);
}
}
>注意：apiStatus、APIRERROR、productList是mobx可观察变量

拟议解决办法2：

//加载wrapperWithFailure.js
@观察者
类LoadingWrapperWithFailure扩展了React.Component{
render（）{
const{apiStatus，APIRROR，renderSuccessUI:renderSuccessUI，onRetry}=this.props；
开关（API状态）{
案例API_获取：
//加载状态
返回；
成功案例：
//成功状态
返回；
案例API_失败：
//失败状态
返回；
违约：
返回null；
}
}
}

//用法
@观察者
类ProductList扩展了React.Component{
renderSuccessUI=观察者（（）=>{
const{productList}=this.props.productStore
返回(
{/*在apicall成功时呈现productList*/}
)
})
render（）{
常数{
蜂王地位，
一个错误，
onRetryApi
}=this.props.productStore；
返回(
);
}
}

最好的办法是什么

为什么这是最好的方式

有没有其他更好的方法来实现上述功能

如果您需要更多信息，请发表评论。蒂亚

// LoadingWrapperWithFailure.js

@observer
class LoadingWrapperWithFailure extends React.Component {
  render() {
    const { apiStatus, apiError, children, onRetry } = this.props;

    switch (apiStatus) {
      case API_FETCHING:
        // Loading state
        return <LoadingView loaderProps={loaderProps} />;
      case API_SUCCESS:
        // Success state
        return children;
      case API_FAILED:
        // Failed state
        return <FailureView onRetry={onRetry} apiError={apiError} />;
      default:
        return null;
    }
  }
}

// Usage

@observer
class ProductList extends React.Component {
  render() {
    const {
      apiStatus,
      apiError,
      productList,
      onRetryApi
    } = this.props.productStore;
    return (
      <LoadingWrapperWithFailure
        apiStatus={apiStatus}
        apiError={apiError}
        onRetry={onRetryApi}
      >
        <SuccessView>
          {/* Renders productList when apicall is success */}
        </SuccessView>
      </LoadingWrapperWithFailure>
    );
  }
}
> Note: apiStatus, apiError, productList are mobx observable variables

// LoadingWrapperWithFailure.js

@observer
class LoadingWrapperWithFailure extends React.Component {
  render() {
    const { apiStatus, apiError, renderSuccessUI: RenderSuccessUI, onRetry } = this.props;

    switch (apiStatus) {
      case API_FETCHING:
        // Loading state
        return <LoadingView loaderProps={loaderProps} />;
      case API_SUCCESS:
        // Success state
        return <RenderSuccessUI />;
      case API_FAILED:
        // Failed state
        return <FailureView onRetry={onRetry} apiError={apiError} />;
      default:
        return null;
    }
  }
}

// Usage

@observer
class ProductList extends React.Component {

  renderSuccessUI = observer(() => {
    const { productList } = this.props.productStore
    return (
      <SuccessView>
          {/* Renders productList when apicall is success */}
      </SuccessView>
    )
  })

  render() {
    const {
      apiStatus,
      apiError,
      onRetryApi
    } = this.props.productStore;
    return (
      <LoadingWrapperWithFailure
        apiStatus={apiStatus}
        apiError={apiError}
        onRetry={onRetryApi}
        renderSuccessUI={this.renderSuccessUI}
      />
    );
  }
}