在父组件中使用fetch传递给子组件

// 父组件
import React, { Component } from 'react';
import ChildComponent from './ChildComponent';

class ParentComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: null
    };
  }

  componentDidMount() {
    fetch('https://api.example.com/data') // 发送HTTP请求获取数据
      .then(response => response.json())
      .then(data => {
        this.setState({ data }); // 将获取到的数据保存到state中
      });
  }

  render() {
    const { data } = this.state;
    return (
      <div>
        <h1>Parent Component</h1>
        <ChildComponent data={data} /> // 将数据传递给子组件
      </div>
    );
  }
}

export default ParentComponent;

// 子组件
import React, { Component } from 'react';

class ChildComponent extends Component {
  render() {
    const { data } = this.props; // 接收父组件传递的数据
    return (
      <div>
        <h2>Child Component</h2>
        {data && <p>{data}</p>} // 使用接收到的数据进行渲染
      </div>
    );
  }
}

export default ChildComponent;