我正在学习 React/Redux,除了课程之外,我还尝试自己做一些事情。所以我正在从我玩的一个名为流亡之路的游戏中复制地图集,但有一些变化。例如,我试图“解决”的主要问题是点击地图,它会突出显示地图已完成,如果你再次点击它,地图将不完整。就像 imgs 中的示例:完成的地图未完成的地图我的问题是,当我点击一张地图时,所有其他地图都标记为已完成。在图像上只有 2 张地图,但有 156 张地图,显然我不想单击地图 X 并突出显示所有其他地图。这是我加载每个地图的组件:export default props => ( <div className="regions"> <Region region="haewark_hamlet"> <Map map_title="Bog" map_name="bog" white_map={maps.haewark.bog.white} yellow_map={maps.haewark.bog.yellow} red_map={maps.haewark.bog.red} map_tier="3" /> <Map map_title="Vaal Pyramid" map_name="vaal_pyramid" white_map={maps.haewark.vaal_pyramid.white} yellow_map={maps.haewark.vaal_pyramid.yellow} red_map={maps.haewark.vaal_pyramid.red} map_tier="3" /> </Region> <Region region="tirns_end" /> <Region region="glennach_cairns" /> <Region region="new_vastir" /> <Region region="lex_ejoris" /> <Region region="lex_proxima" /> <Region region="valdos_rest" /> <Region region="lira_arthain" /> </div>);这是我的地图组件:const Map = props => { const { completed } = props; const toggleComplete = function () { completed ? props.mapUncomplete() : props.mapComplete(); }; return ( <div className={`map ${props.map_name}`} id={props.map_name}> <div className="map-name">{props.map_title}</div> <img className="map-size" src={base_map} alt="base map" /> <div className="map-tier-color"> <img className={`map-size ${props.map_name}-white`} src={props.white_map} alt={`${props.map_name} white map`} /> ></div> </div> );};
1 回答

弑天下
TA贡献1818条经验 获得超8个赞
如果你只想将一些地图标记为已完成/未完成,你应该在 redux 中保留一个结构来知道哪些已完成,哪些未完成。
例如,您的商店应如下所示:
{
...
completed: [0,2,3,...,78,90],
}
您可以假设如果地图 ID 不在该数组中,则地图未完成。在这种情况下,您的动作创建者也应该改变。您必须提供所引用地图的标识符,而不仅仅是传递地图是否完成。
显然,这只是一个示例,它确实不是解决您的问题的最佳实现。找到适合您的问题的那个取决于您。然而,基本思想仍然是一样的:你必须向你的组件、动作创建者提供你的缩减器,你想要应用你的动作的地图的标识符。
添加回答
举报
0/150
提交
取消