从根组件获取状态 - react.js答案

【问题标题】：Getting state from root component - react.js从根组件获取状态 - react.js
【发布时间】：2019-11-02 16:15:55
【问题描述】：

我刚开始学习反应，我也需要从根组件到子组件的状态，我可以说。我有 App.js 文件，它有状态，这是一个玩家数组。然后我有 Home.js，我将它导入到 App.js，然后我有一个 Players.js 组件，它需要显示该玩家对象。

/* App.js */

class App extends Component {
  state = {
    players: [
      {name: 'Kacper', gender: 'M', id: 1},
      {name: 'Patrycja', gender: 'F', id: 2},
      {name: 'Marcel', gender: 'M', id: 3},
      {name: 'Wiktoria', gender: 'F', id: 4}
    ]
  }

  deletePlayer = (id) => {

    const players = this.state.players.filter(player => {
      return player.id !== id
    })

    this.setState({
      players
    })
  }

  render(){
    return (
     <div>
       <Home players={this.state.players} deletePlayer={this.deletePlayer}/>
     </div>
    );
  }
}

export default App;

/* Home.js */

class Home extends Component {
  state = {
    players: players
  }

  render(){
    return (
     <div className="add-players">
      <Players players={this.state.players}/>
      <div className="add-player"></div>
        <button className="start-btn">
        <i className="material-icons">play_arrow</i> <p>Let's play!</p>
        </button>
     </div>
    );
  }
}

export default Home;

/* Players.js */

const Players = ({players, deletePlayer}) => {
  const playerList = players.length ? (
    players.map(player => {
      return (
        <div className="player" key={player.id}>
          <div className="gender">{player.gender}</div>
          <span>{player.name}</span>
          <i className="material-icons" onClick={() => {deletePlayer(player.id)}}>close</i>
        </div>
      )
    })
  ) : (
    <p>Add player</p>
  )
  return (
      <div className="players">
        {playerList}
      </div>
  )
}

export default Players;

【问题讨论】：

标签： reactjs react-redux react-router jsx

【解决方案1】：

您将根组件的播放器状态作为属性传递给Home。所以你必须从props访问它。

只需将您的 Home 组件更新为以下内容：

class Home extends Component {
  render(){
    return (
     <div className="add-players">
      <Players players={this.props.players}/>
      <div className="add-player"></div>
        <button className="start-btn">
        <i className="material-icons">play_arrow</i> <p>Let's play!</p>
        </button>
     </div>
    );
  }
}

export default Home;

【讨论】：

那么就这么简单...非常感谢。