我有三个组件->一个游戏组件,它呈现一个GameBoard组件,它呈现各种BeerCard组件。
[BeerCards组件仅是Cards-由通过GameBoard作为道具传递的数据进行渲染,这些数据是通过api调用到达服务器并存储在状态中的。
我正在尝试通过从Game组件传递来的点击功能来访问单个卡片{名称,啤酒厂,ID}的道具,然后将道具添加到Game组件中的状态,然后将其使用将选定的卡作为POST提交回服务器。但是无法理解如何访问这些资源吗?有什么想法吗?
class GameBoard extends Component {
constructor(props) {
super(props);
this.state = { beers: [], error: null };
}
componentDidMount() {
axios.get('/api/game').then(
result => {
this.setState({ beers: result.data.beer });
},
error => {
this.setState({ error });
}
);
}
render() {
const beerList = this.state.beers.map(beer => (
<BeerCard
name={beer.name}
brewery={beer.brewery}
photo={beer.photoURL}
key={beer._id}
id={beer._id}
onClick={this.props.onClick}
/>
));
return <div className="row">{beerList}</div>;
}
}
BeerCard组件
const BeerCard = ({ name, brewery, photo, onClick }) => (
<div className="col-12 col-md-6 col-xl-4">
<div className="card" style={{width: '20rem', height: '20rem'}} onClick={onClick}>
<img className="card-img-top" src={photo} alt={name}></img>
<div className="card-body">
<h3 className="card-title">{name}</h3>
<h5 className="card-text">{brewery}</h5>
</div>
</div>
</div>
);
游戏组件
class Game extends Component {
constructor(props) {
super(props);
this.state = { entry: []}
this.handleClick = this.handleClick.bind(this, props)
}
handleClick(props) {
console.log(this.props)
}
render() {
return (
<div>
<GameBoard
onClick={this.handleClick}
/>
</div>
)
}
}
export default Game;
我会使用上下文。因为游戏组件是数据的整理和填充位置,然后发布,对吧?
我不知道这是否是最好的选择,但是您可以编写上下文,并且无需通过道具就可以访问应用程序各个级别的数据。
我将在游戏组件(或最高级组件)上创建api的所有逻辑,并使其成为上下文的提供者。因此,每个子组件都可以访问功能。
更新我们!
在GameBoard
类中将onClick={this.props.onClick}
更改为onClick={() => this.props.onClick(bear)}
and in
Game`类,请执行以下更改:
class Game extends Component {
constructor(props) {
super(props);
this.state = { entry: []}
this.handleClick = this.handleClick.bind(this)
}
handleClick(bear) {
console.log(bear)
}
render() {
return (
<div>
<GameBoard
onClick={this.handleClick}
/>
</div>
)
}
}
export default Game;
我建议您使用redux
来管理状态和动作