React.js中如何将A组件的AJAX数据传递给嵌套C组件？

Hey there! Let's walk through how to get that data from Component A down to Component C, since you're already using getDerivedStateFromProps in Component B. Here's a clear, step-by-step approach that fits your setup:

1. Manage core state in Component A #

Component A is the source of your data, so it should hold two key pieces of state:

• The fetched data from your AJAX call
• A boolean to control whether the modal (Component B) is open

Example code for A.js:

import React, { Component } from 'react';
import B from './B';

class A extends Component {
  state = {
    fetchedData: null,
    isModalOpen: false
  };

  // Run AJAX on component mount
  componentDidMount() {
    fetch('your-api-endpoint-url')
      .then(response => response.json())
      .then(data => this.setState({ fetchedData: data }));
  }

  // Toggle modal visibility
  handleModalToggle = () => {
    this.setState(prevState => ({ isModalOpen: !prevState.isModalOpen }));
  };

  render() {
    return (
      <div>
        <button onClick={this.handleModalToggle}>打开模态框</button>
        {/* Pass both modal state and fetched data to B */}
        <B modelStatus={this.state.isModalOpen} dataFromA={this.state.fetchedData} />
      </div>
    );
  }
}

export default A;

2. Pass data through Component B to C #

You're already using getDerivedStateFromProps to sync the modal's open state in Component B—great! Now just pass the incoming dataFromA prop directly to Component C (no need to store it in B's state unless you need to manipulate it first).

Example code for B.js (incorporating your existing code):

import React, { Component } from 'react';
import C from './C';

class B extends Component {
  state = {
    modalchildOpen: false
  };

  static getDerivedStateFromProps(nextProps) {
    return { modalchildOpen: nextProps.modelStatus };
  }

  render() {
    const { modalchildOpen } = this.state;
    const { dataFromA } = this.props;

    return (
      {/* Modal container with visibility controlled by state */}
      <div className="modal-backdrop" style={{ display: modalchildOpen ? 'block' : 'none' }}>
        {/* Pass the data directly to C as a prop */}
        <C modalContent={dataFromA} />
      </div>
    );
  }
}

export default B;

3. Display the data in Component C #

Now Component C can receive the data via props and render it directly. Add a check for empty data to handle cases where the AJAX call hasn't finished yet.

Example code for C.js:

import React, { Component } from 'react';

class C extends Component {
  render() {
    const { modalContent } = this.props;

    if (!modalContent) {
      return <div className="modal-body">数据加载中...</div>;
    }

    return (
      <div className="modal-body">
        <h2>模态框内容</h2>
        <p>名称: {modalContent.name}</p>
        <p>详情: {modalContent.description}</p>
        {/* Render other fields from your fetched data */}
      </div>
    );
  }
}

export default C;

• This props-based approach works perfectly for your 3-component hierarchy. If you ever need to pass data through more layers later, you could look into React Context API or state management libraries like Redux, but props are simpler here.
• Make sure to handle loading/error states in Component C (like the "数据加载中..." message) to avoid rendering errors if the AJAX call is still in progress when the modal opens.

内容的提问来源于stack exchange，提问作者abu abu