反应组件状态和道具

Question

希望您一切都好！我需要以下代码的帮助。我想在屏幕上像这样显示猜测名称和猜测礼物：名称：鲍勃＆礼物：香槟。但我不知道如何使此标准发挥作用

名称：{this.props.guest.name}
礼物：{this.props.guest.gift}

谢谢您的帮助！

class App extends React.Component {

constructor(props) {
super(props);

this.state = {
  partyType: "birthday",
  entertainment: "clowns",
  venue: {
    name: "Polly's Party Palace",
    capacity: 120,
    address: '35, Rue Borno'
  },
  guessesList: [
    {
      id: 0,
      name: 'Bob',
      gift: 'Champaign',
    },
    {
      id: 1,
      name: 'Marie',
      gift: 'Chocolate cake',
    },
    {
      id: 2,
      name: 'Max',
      gift: 'Gift box',
    },
    {
      id: 3,
      name: 'Melinda',
      gift: 'Flowers',
    }
  ]
};

  }

renderListOfGuest(guessesList) {
return (
  <div>
    {guessesList.map(guest => <div key={guest.id}> {guest.name}  </div>)}
  </div>
);
}

render() {
  return (
  <div >
    <Party partyType={this.state.partyType} entertainment={this.state.entertainment} venue={this.state.venue} guestList={this.renderListOfGuest(this.state.guessesList)} />
  </div>
);
 }
}

class Party extends React.Component {
  render() {
    return(
   <div> 
      <h3> Parti Time! </h3>
      <p>This {this.props.partyType} party will be held at {this.props.venue.name} with a maximum capacity of {this.props.venue.capacity}.</p>
      <p>Featured entertainment: {this.props.entertainment}!</p>
     <p>
       The venue address is: {this.props.venue.address}.
     </p>
     <div>
     <h4>Guest List</h4>
     <p> Name: {this.props.guest.name} <br />
     Gift: {this.props.guest.gift} 
     </p>
    </div>
    </div>
  );
    }
 }

ReactDOM.render(<App />, document.getElementById('root'));