Question

如何将祖父对象的AJAX数据传递给孙子组件。它适用于祖父母和父母组件，但对于父母和孙子，在这种情况下不适用

＆＃13;

// 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>

＆＃13;

Answer 1

我认为您需要将post数据从grandParent传递到parent，然后才将其转发到grandChild

// 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>

如何将AJAX数据传递给孙子组件 - ReactJs

1 个答案: