Reactjs 多张卡上的反应卡翻转库

我想翻转一些卡片，但使用react card flip可以一次翻转所有卡片。在这段代码中，我有两张卡片，它们的正面和背面。我试着把所有的东西都放在一个普通的标签下，但对我来说效果不太好。关于我应该在这里做什么有什么建议吗

这是密码

类索引扩展了React.Component{
构造函数（）{
超级（）；
此.state={
我翻了：错，
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（e）{
e、 预防默认值（）；
this.setState（（prevState）=>（{isFlipped:！prevState.isFlipped}））；
}
render（）{
返回(
{/*前端*/}
正面
{/*背面*/}
背面
{/*前端*/}
正面
{/*背面*/}
背面
);
}
}

问题是您只有一个状态参数控制所有卡。 解决方案是将所有“翻转”卡片设置为

。对于每张卡，检查其是否在集合内

导出默认类索引扩展React.Component{
构造函数（）{
超级（）；
此.state={
翻转：新集合（）
};
this.handleClick=this.handleClick.bind（this）；
}
handleClick（id）{
返回（e）=>{
e、 预防默认值（）；
let flipped=新集合（this.state.flipped）；
如果（翻转的.has（id））{
翻转。删除（id）；
}否则{
翻转。添加（id）；
}
this.setState（{flipped}）；
};
}
render（）{
返回(
{/*前端*/}
正面
{/*背面*/}
背面
{/*前端*/}
正面
{/*背面*/}
背面
);
}
}

当你把它放在一个公共组件中时，你遇到了什么问题？@Shyam它就是不起作用。虽然只使用reactcardflip作为常用标记，但我可能做得不正确。你能让我知道它应该是什么样子吗？有了上面的解决方案。我们可以为flipCard创建一个通用组件<代码>

同意。最好在循环内部运行（

map

），但在OP为每个组件分别设置状态之前，它无法解决问题。是的，我建议作者在您的逻辑之上创建一个可重用的组件，这样他就可以避免重复。你的解决方案是正确的！