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 />用于登录按钮，...）？ 1}}

谢谢

Answer 1

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

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

1 个答案: