我正在使用PrimeReact的数据树组件，文档链接如下。树组件接收具有定义如下字段的对象
const data = [
{
"key": "0",
"label": "Documents",
"data": "Documents Folder",
"icon": "pi pi-fw pi-inbox",
"children": [{
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "pi pi-fw pi-cog",
"children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
},
{
"key": "0-1",
"label": "Home",
"data": "Home Folder",
"icon": "pi pi-fw pi-home",
"children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
}]
}
]
这样称呼
<Tree value={data} />
icon 属性用于确定标注标签旁边呈现的符号。我想使用自己的.png代替可用的图标。我最初会尝试添加一个 img 标签，但这似乎不起作用。如果需要更多信息，请告诉我。
https://www.primefaces.org/primereact/#/tree
尝试使用css。在css文件中：
youricon{
background-image: url('local-url');
}
所以它是这样的：
const data = [
{
"key": "0",
"label": "Documents",
"data": "Documents Folder",
"icon": "youricon",
"children": [{
"key": "0-0",
"label": "Work",
"data": "Work Folder",
"icon": "youricon",
"children": [{ "key": "0-0-0", "label": "Expenses.doc", "icon": "pi pi-fw pi-file", "data": "Expenses Document" }, { "key": "0-0-1", "label": "Resume.doc", "icon": "pi pi-fw pi-file", "data": "Resume Document" }]
},
{
"key": "0-1",
"label": "Home",
"data": "Home Folder",
"icon": "youricon",
"children": [{ "key": "0-1-0", "label": "Invoices.txt", "icon": "pi pi-fw pi-file", "data": "Invoices for this month" }]
}]
}
]
在相关的说明中，尝试使用易于获得的图标，例如FontAwesome，FeatherIcons，Octicons。如果您使用的是primereact，则它的更新版本有自己的图标primeicons。
您需要先使用以下命令安装它：npm install primeicons --save。
您可以在此处获取更多详细信息：https://www.primefaces.org/primereact/#/icons