单击时激活 React/Redux 多个组件

Question

我正在学习 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>

    );

};

Answer 1

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