reactjs - 简单的 React JS REST 获取包装器

Question

我想构建一个通用的获取数据-> 显示加载/错误，这样我就可以构建一个页面，其中大部分只定义两个组件。

IE：我主要是反复定义 DogRenderer 和 DogComponent。

我的方法在这里理智吗？

const MyGetComponent = ({url, Render, children}) => {

  const { data, loading, error } = useGet({
    path: url
  });

  if (loading) return <h1>Loading..Vy.</h1>;
  if (error) return <h1>Error..Vy.</h1>;

  return <Render data={data} children={children} />;
};

const DogRenderer = (props) => {
  return (
    <>
      <img alt="Alt thingo" src={props.data.message} />
      {props.children}
    </>
  );
};

const DogComponent = (props) => {
  console.log(props);
  return (
    <MyGetComponent
      url="https://dog.ceo/api/breeds/image/random"
      Render={DogRenderer}
      children={props.children}
    />
  );
};

const page = () => {
  return <DogComponent/>;

}

export default page;

标签： reactjsreact-functional-component