reactjs - 从根组件获取状态 - react.js
问题描述
我刚开始学习反应,我也需要从根组件到孩子的孩子,我可以说。我有 App.js 文件,它有状态,这是一个玩家数组。然后我有 Home.js,我将它导入到 App.js,然后我有一个 Players.js 组件,它需要显示该玩家对象。
/* 应用程序.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;
/* 主页.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;
/* 玩家.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;
解决方案
您将根组件的播放器状态作为属性传递给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;
推荐阅读
- c# - “绑定”问题必须具有非空值
- ruby-on-rails - 如何验证取决于不同的提交按钮
- c# - Terminal.Gui c# - 有什么方法可以将 Dim 转换为 int?
- javascript - Typescript React 无法识别传递给功能组件的道具,ts 2740
- javascript - 如何在我的日期选择器上启用未来年份?
- php - PHP 调用未定义的方法 - pdo 实例化
- azure - Azure PowerShell:Get-AzVM 不显示输出
- kubernetes - 执行 kubectl run 并输出到 yaml 时的未知和嘈杂的字段
- sql - 避免连接中的重复 (Oracle)
- html - 用于将表单数据提交到另一个包含 # 的 URL 的按钮