Question

Newby React Project帮助：

我试图将组件的状态传递给子组件，以便它可以加载图像。 gift1的状态最初为空。当按下按钮时，它将切换显示子组件，并且gift1设置为具有图像细节的对象。以下是在父组件中设置的切换，其中this.state.giftContainer用于切换子组件：GiftBoxAnimation。它还将gift1状态作为礼物属性传递给孩子。

let display = this.state.giftContainer && this.state.giftContainer === true 
  ? (<GiftBoxAnimation gift={this.state.gift1} />)
  : null;

按下父组件中的按钮时，generateItems()会触发并将gift1的状态设置为该对象，然后切换子对象

  generateItems = (e) =>{
  //Insert code here that sets state of gift1: {name: "giftImage"}

    this.setState({
      giftContainer: true
    });
  }

子组件看起来像这样：

  <Spritesheet
    className={"sprite-gift"}
    image={"/images/"+this.props.gift+".png"}
    widthFrame={1024}
    heightFrame={1024}
    steps={5}
    fps={5}
    autoplay={true}
    loop={true}
  />

当我尝试使用this.props.gift获取图像数据时，它会返回gift1空状态原始设置。第二次按下父组件上的按钮时，将返回一个对象。但是，如果我尝试使用this.props.gift.name访问该图像，它就是undefined。

如何将父状态传递给孩子，以便可以在第一次按下父按钮时在子组件中显示图像？

Answer 1

更改以下代码以将空对象传递为空

let display = this.state.giftContainer 
&& this.state.giftContainer === true 
?(<GiftBoxAnimation gift={this.state.gift1 || {}}/>)
:(null);

按下按钮时将状态传递给子组件为空

1 个答案: