Question

我正在使用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

Answer 1

尝试使用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。如果您使用的是底漆，则它的更新版本具有自己的图标primeicons。

您首先需要使用npm install primeicons --save进行安装。

您可以在此处获得更多详细信息：https://www.primefaces.org/primereact/#/icons

将自定义图像用于PrimeReact数据树图标

1 个答案: