寻找更好的算法（条件渲染）

Question

在我的Web应用程序中，我使用json文件来存储我的不同路由，然后我在这个json文件中循环一个数组来创建内容，例如导航栏按钮。

我面临的问题是我想为json文件中显示的每个值使用不同的图标，我无法将图标组件存储到json文件中。

这是我的代码示例，其中包含json文件中包含的数组循环

{props.buttons.button.map((button, index) => (
                <div key={index}>
                    {(button.isAuth === props.isAuth || button.isAuth === 3) && (
                        <>
                            <Link to={button.to} className="link">
                                <ListItem button>
                                    <ListItemIcon>
                                        <InputIcon />
                                    </ListItemIcon>
                                    <ListItemText primary={button.label} />
                                </ListItem>
                            </Link>
                        </>
                    )}
                </div>
            ))}

这是json文件的示例

{
    "button": [
        {
            "label": "Home",
            "isAuth": 3,
            "to": "/"
        },
        {
            "label": "About",
            "isAuth": 3,
            "to": "/about"
        }
    ]
}

目前，对于我的json文件中的每个数据，始终显示相同的图标组件：<InputIcon />。

如何为json文件中的每个数据显示不同的图标组件（例如主页按钮的<HomeIcon />，登录的<LogInIcon />，...），而不使用和if/else

谢谢

Answer 1

如果可能，您可以构造<InputIcon />组件以接受prop并将标签传递给此组件。