您可以使用索引。
export default class Deck extends React.Component{ constructor(props) { super(props); //flipped true nonflipped false this.state = { flipStatus : props.cards.map((element) => false) } handleClick(index) { const newflipStatus = [...this.state.flipStatus] newflipStatus[index] = !this.state.flipStatus[index] this.setState({flipStatus: newflipStatus); } render() { const list = this.props.cards.map((card, index) => { return <Card key={index} handleClick={this.handleClick.bind(this)} condition={this.state.flipped} index={index} image={cardlist[card].path} flipped=this.state.flipStatus[index] />}); return( <ul> {list} </ul>) }};这是您的卡组件
export default class Card extends React.Component { render() { let className = this.props.condition ? 'card-component flipped' : 'card-component'; return ( <div onClick={() => this.props.handleClick(this.props.index)} className={className}> {!flipped && <div className="front"> <img src={this.props.image} alt="card"/> </div>} {flipped && <div className="back"> </div>} </div>); }}
