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

问题描述

如何将AJAX数据从祖父母组件传递到孙组件.它适用于祖父母和父母组件，但不适用于父母和孙子

How can I pass AJAX data from grandparent to grandchild component. It works for grandparent and parent components but for parent and grandchild doesn't in this case

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

推荐答案

我想您需要将 post 数据从 grandParent 传递给 parent ，然后仅将其转发给 grandChild 之类的

I suppose you need to pass the post data from grandParent to parent and then only forward it to grandChild like

// 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！