Wie AJAX-Daten an die Enkel-Komponente übergeben werden - ReactJs

Question

Wie kann ich AJAX-Daten von Großeltern zu Enkel-Komponente übergeben. Es funktioniert für Zucht- und Komponenten, sondern für Eltern und Enkel nicht in diesem Fall

// GrandParent 
 

 
<main className="main"> 
 
     <h1 className="main__heading">Images from Unsplash API</h1> 
 
     <section className="main__section"> 
 
      {this.state.posts.map(post => { 
 
      return (
 
       <Section imgSrc={post.urls.regular} key={post.id} /> 
 
      ) 
 
      })} 
 
     </section> 
 
     </main> 
 
     
 
//Parent 
 

 
<section className="card-section"> 
 
     <img className="card-section__img" src={this.props.imgSrc} alt="Lorem Ipsum" /> 
 
     <Author 
 
      authorSrc={post.user.profile_image.small} 
 
      authorAlt={post.user.name} 
 
      authorName={post.user.name} 
 
     /> 
 
     </section> 
 

 
//GrandChild 
 

 
<div className="author-info"> 
 
     <img className="author-info__img" src={this.props.authorSrc} alt={this.props.authorAlt} /> 
 
     <h3 className="author-info__heading">{this.props.authorName}</h3> 
 
     </div>

Answer 1

ich Ihnen die post Daten grandParent-parent und dann nur nach vorne es passieren annehmen müssen grandChild wie

// GrandParent 

<main className="main"> 
     <h1 className="main__heading">Images from Unsplash API</h1> 
     <section className="main__section"> 
      {this.state.posts.map(post => { 
      return (
       <Section post={post} imgSrc={post.urls.regular} key={post.id} /> 
      ) 
      })} 
     </section> 
     </main> 

//Parent 

<section className="card-section"> 
     <img className="card-section__img" src={this.props.imgSrc} alt="Lorem Ipsum" /> 
     <Author 
      authorSrc={this.props.post.user.profile_image.small} 
      authorAlt={this.props.post.user.name} 
      authorName={this.props.post.user.name} 
     /> 
     </section> 

//GrandChild 

<div className="author-info"> 
     <img className="author-info__img" src={this.props.authorSrc} alt={this.props.authorAlt} /> 
     <h3 className="author-info__heading">{this.props.authorName}</h3> 
     </div>