Reactjs 将子组件传递给API组件

为了减少重复代码，我尝试将API获取程序实现为可重用组件

如何将子组件传递给此ApiFetcher，以便它呈现特定的子组件而不是硬编码的组件

此外，我的公司档案组件是否以有效的方式编码，或者是否有优化的空间

import React from "react";
import { useState, useEffect } from "react";

function ApiFetcher(props) {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch(props.url)
      .then((res) => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result);
        },
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      );
  }, []);

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {

    // TODO: return props.childrend instead of hard coded component

    return (
      <div>
        <CompanyProfile items={items} />
      </div>
    );
  }
}

function CompanyProfile(props) {
  return (
    <div>
      <ul>
        {props.items.map((item) => (
          <li key={item.symbol}>
            {item.companyName} {item.price}
          </li>
        ))}
      </ul>
    </div>
  );
}

function App() {
  const apiUrl =
    "https://financialmodelingprep.com/api/v3/profile/AAPL?apikey=demo";

  // TODO: implement children of ApiFetcher
  return (
    <div>
      <ApiFetcher url={apiUrl}>
      </ApiFetcher>
    </div>
  );
}

export default App;

从“React”导入React；
从“react”导入{useState，useffect}；
函数ApiFetcher（道具）{
const[error，setError]=useState（null）；
const[isLoaded，setIsLoaded]=useState（false）；
const[items，setItems]=useState（[]）；
useffect（（）=>{
获取（props.url）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
setIsLoaded（真）；
设置项目（结果）；
},
（错误）=>{
setIsLoaded（真）；
设置错误（错误）；
}
);
}, []);
如果（错误）{
返回错误：{Error.message}；
}否则，如果（！已加载）{
返回装载。。。；
}否则{
//TODO:返回props.childrend而不是硬编码组件
返回(
);
}
}
功能公司档案（道具）{
返回(

{props.items.map（（item）=>(

{item.companyName}{item.price}

))}

);
}
函数App（）{
常数apiur=
"https://financialmodelingprep.com/api/v3/profile/AAPL?apikey=demo";
//TODO:实现ApiFetcher的子级
返回(
);
}
导出默认应用程序；

您可以使用高阶组件

高阶分量（HOC）是一种先进的反应分析技术 重用组件逻辑。HOC本身不是React API的一部分。 它们是从React的组成性质中产生的一种模式

例如：

function withApiResponse(WrappedComponent, url, ...) {
 return function ApiFetcher(props) {
  ...
  const someData = ...;
  const items = ...;
  return (
      <div>
        <WrappedComponent someData/>
        <CompanyProfile items={items} />
      </div>
  );
 }
}

const Comments = withApiResponse(CommentsComponent, "/comments");
const Reviews = withApiResponse(ReviewsComponent, "/reviews");

function App() {
  return (
    <div>
      <Comments />
      <Reviews />
    </div>
  );
}

带有APIResponse（WrappedComponent、url等）的函数{ 返回函数ApiFetcher（props）{ ... 常数someData=。。。； 常量项=。。。； 返回( ); } } const Comments=带有APIResponse（Comments组件，“/Comments”）； const Reviews=带有APIResponse（Reviews组件，“/Reviews”）； 函数App（）{ 返回( ); }

---

您可以提供一个函数作为ApiFetcher的唯一子函数，并在加载数据后调用它：

<ApiFetcher url={apiUrl}>
  {(items) => {
    return <CompanyProfile items={items} />;
  }}
</ApiFetcher>

---

非常感谢，这似乎是最好的方法。

  if (error) {
    return <div>Error: {error.message}</div>;
  } else if (!isLoaded) {
    return <div>Loading...</div>;
  } else {
    // Call the provided function
    return props.children(items);
  }