reactjs - 在我的 React 应用程序中，我无法将 removePlayer 方法作为道具传递给 Player 组件

Question

当我检查元素时，我能够看到名称、键和 Id 道具，但不能看到 removePlayer。当我检查元素时，我执行了 removePlayer 道具，但它的值为空。

class App extends React.Component {
  state = {
    players: [
    {name: 'player1', id: 1},
    {name: 'player2', id: 2},
    {name: 'player3', id: 3},
    {name: 'player4', id: 4 }
  ]
  }

  removePlayer = (id) => {
    this.setState( prevState => {
      return {
        players: prevState.players.filter( p => p.id !== id)
      }
    })
  }

  render() {
    return (
      <div className="scoreboard">
        <Header title="Scoreboard" totalPlayers={this.state.players.length}/>
        {this.state.players.map( player => {
         return (
           <Player
             name={player.name}
             id={player.id}
             removePlayer={this.removePlayer}
             key={String(player.id)}>
           </Player>)
        })}
      </div>
    );
  }
}

标签： reactjs