有没有比这更好的方法来制作 React 中的选项列表？答案

【问题标题】：Is there a better approach to making a list of options in React than this?有没有比这更好的方法来制作 React 中的选项列表？
【发布时间】：2022-11-15 12:13:31
【问题描述】：

我对使用 React 很陌生，但我的直觉告诉我这个概念已经出现，并且有比我使用的更好的工具或方法来处理它。我想要一个可供选择的按钮列表，当单击一个按钮时，显示该菜单并删除其他按钮。我目前的解决方案是拥有一个选项菜单组件，该组件具有一个开关，可以在单击和退出按钮时处理按钮（包括代码）。

这是最好的方法还是有更好的方法？

    const options = ["Monsters", "Champions", "Dice", "Arena"];

 const closeHandler = () => {
        setSelected("");
    };


  switch (selected) {
            case "":
                return (
                    <div>
                        <ul>
                            {options.map(option =>
                                <li>
                                    <button onClick={selectionHandler}>{option}</button>
                                </li>
                            )}
                        </ul>
                    </div>
                );
            case "Monsters":
                return (
                    <MonsterMenu onClose={closeHandler} />
                );
            case "Champions":
                return (
                    <ChampionMenu onClose={closeHandler} />
                );
            case "Dice":
                return (
                    <DiceMenu onClose={closeHandler} />
                );
            case "Arena":
                return (
                    <ArenaMenu onClose={closeHandler} />

                );

【问题讨论】：

标签： reactjs web-applications frontend

【解决方案1】：

您可以将逻辑移动到通用的<Menu/> 组件，而不是导入和调用 4 个不同的菜单组件，该组件将通过将当前选定状态作为道具传递来处理分离它们。

这将允许您使用三元而不是长 switch 语句。

就像是：

return (selected ? <Menu type={selected} onClose={closeHandler}/> : /* options */);

如果这些组件之间已经存在相当多的相似性和共享代码，则可以全面减少冗余。但是可能有理由将它们作为单独的组件，在这种情况下，上述解决方案将不是理想的。

【讨论】：