子组件加载父页面的接口数据

在React中，子组件可以通过props属性来接收父组件传递的数据。如果需要加载父页面的接口数据，可以在父组件中调用接口并将数据通过props传递给子组件。

以下是一个简单的示例：

父组件：

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import ChildComponent from './ChildComponent';

function ParentComponent() {
  const [data, setData] = useState([]);

  useEffect(() => {
    async function fetchData() {
      const result = await axios.get('https://example.com/api/data');
      setData(result.data);
    }
    fetchData();
  }, []);

  return (
    <div>
      <h1>Parent Component</h1>
      <ChildComponent data={data} />
    </div>
  );
}

export default ParentComponent;

在父组件中，我们使用useState和useEffect钩子来调用API并将数据存储在状态中。然后，我们将数据作为props传递给子组件。

子组件：

import React from 'react';

function ChildComponent(props) {
  return (
    <div>
      <h2>Child Component</h2>
      <ul>
        {props.data.map((item) => (
          <li key={item.id}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default ChildComponent;

在子组件中，我们可以通过props.data访问父组件传递的数据，并将其渲染为列表。这里我们将数据作为props从父组件传递给子组件，并在子组件中使用它。