reactjs - 将子组件传递给 API 组件
问题描述
我正在尝试将 API 提取器实现为可重用组件,以减少重复代码。
如何将子组件传递给此 ApiFetcher,以便它呈现特定子组件而不是硬编码组件?
此外,我的 CompanyProfile 组件是否以有效的方式编码或是否有优化空间?
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;
解决方案
您可以使用更高阶的组件。
高阶组件 (HOC) 是 React 中用于重用组件逻辑的高级技术。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>
);
}
推荐阅读
- appkit - 如何以编程方式使用`NSControl.ControlSize.mini`制作`NSPopUpButton`?
- javascript - 在 jquery 数据表过滤器列上设置默认值并在页面加载时进行初始过滤
- javascript - 如何从 IDE 而不是内联编辑器编写实现代码?
- javascript - JS - 搜索栏不返回任何内容
- javascript - axios 超时重试
- python - 无法替换 Pandas 中的值
- c# - C# Visual Studio 2019 大元素中的“System.OutOfMemoryException”
- c++ - 控制台属性的 C++ 奇怪行为
- javascript - jQuery each() not working correctly with wrapAll() and wrap()
- postgresql - 使用分隔符为 ',' 的 csv 数组文字从 postgresql 复制