Javascript 将元素从子组件移动到其父组件

我想设计一个ApiFetcher以防止代码重复

如何将自定义子组件传递给ApiFetcher，以便它呈现我在自定义组件中指定的内容，而不是返回语句中硬编码的元素

我希望将ApiFetcher和CompanyProfile组件的逻辑排除在其父组件之外

import React from "react";
import ReactDOM from "react-dom";
import { useState, useEffect } from "react";

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

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

  useEffect(() => {
    fetch(apiUrl)
      .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: move the following <div> out of this component and render children
    return (
      <div>
        {items.map((item) => (
          <li key={item.symbol}>
            {item.companyName} {item.price}
          </li>
        ))}
      </div>
    );
  }
}

function CompanyProfile() {
  return (
    <div>
      <ApiFetcher>
        {/*
        TODO: move the following into this component:

      <div>
        {items.map((item) => (
          <li key={item.symbol}>
            {item.companyName} {item.price}
          </li>
        ))}
      </div>
    */}
      </ApiFetcher>
    </div>
  );
}

ReactDOM.render(<CompanyProfile />, document.getElementById("root"));

从“React”导入React；
从“react dom”导入react dom；
从“react”导入{useState，useffect}；
函数ApiFetcher（道具）{
常数apiur=
"https://financialmodelingprep.com/api/v3/profile/AAPL?apikey=demo";
const[error，setError]=useState（null）；
const[isLoaded，setIsLoaded]=useState（false）；
const[items，setItems]=useState（[]）；
useffect（（）=>{
获取（APIRL）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
setIsLoaded（真）；
设置项目（结果）；
},
（错误）=>{
setIsLoaded（真）；
设置错误（错误）；
}
);
}, []);
如果（错误）{
返回错误：{Error.message}；
}否则，如果（！已加载）{
返回装载。。。；
}否则{
//TODO:将以下内容移出此组件并渲染子项
返回(
{items.map（（item）=>(

{item.companyName}{item.price}

))}
);
}
}
函数公司profile（）{
返回(
{/*
TODO:将以下内容移动到此组件中：
{items.map（（item）=>(

{item.companyName}{item.price}

))}
*/}
);
}
render（，document.getElementById（“根”））；

您可以使用

props.children

将渲染逻辑移动到父组件。以下是我将如何构造该组件：

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

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

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

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return props.children({response: items});
}

函数ApiFetcher（{url}）{
const[error，setError]=useState（null）；
const[isLoaded，setIsLoaded]=useState（false）；
const[items，setItems]=useState（[]）；
useffect（（）=>{
获取（url）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
setIsLoaded（真）；
设置项目（结果）；
},
（错误）=>{
setIsLoaded（真）；
设置错误（错误）；
}
);
}, []);
如果（错误）{
返回错误：{Error.message}；
}
如果（！已加载）{
返回装载。。。；
}
返回props.children（{response:items}）；
}

用法

<ApiFetcher>
{({response}) => // Rendering logic}
</ApiFetcher>

{（{response}）=>//呈现逻辑}

您可以使用

props.children

将渲染逻辑移动到父组件。以下是我将如何构造该组件：

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

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

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

  if (!isLoaded) {
    return <div>Loading...</div>;
  }

  return props.children({response: items});
}

函数ApiFetcher（{url}）{
const[error，setError]=useState（null）；
const[isLoaded，setIsLoaded]=useState（false）；
const[items，setItems]=useState（[]）；
useffect（（）=>{
获取（url）
.然后（（res）=>res.json（））
.那么(
（结果）=>{
setIsLoaded（真）；
设置项目（结果）；
},
（错误）=>{
setIsLoaded（真）；
设置错误（错误）；
}
);
}, []);
如果（错误）{
返回错误：{Error.message}；
}
如果（！已加载）{
返回装载。。。；
}
返回props.children（{response:items}）；
}

用法

<ApiFetcher>
{({response}) => // Rendering logic}
</ApiFetcher>

{（{response}）=>//呈现逻辑}

props.children不起作用？你是对的，我应该把代码再往前走一步。props.children不起作用？你是对的，我应该把代码再往前走一步。非常感谢，它工作得非常好！非常感谢，它工作得非常好！