如何通过反应将primereact添加到laravel

问题描述

我有一个安装了 laravel/ui 的 laravel 8 应用程序并预​​设了反应。我想在 react spa 中使用 Primereact，但我不知道如何添加到 laravel mix 等中，有人可以帮助我吗？

解决方法

我找到了解决方案，Laravel 将一些文件放在资源文件夹中，您必须编辑 app.scss 并在末尾添加此行

@import 'primereact/resources/themes/saga-blue/theme.css';
@import 'primereact/resources/primereact.min.css';
@import 'primeicons/primeicons.css';

当然可以换主题css

你还必须运行这些命令

npm install primereact --save npm install primeicons --save

在你的组件中，你可以导入你想要的素数组件。

示例：

import React,{ Component } from 'react';

//PRIMENG
import { Menubar } from 'primereact/menubar';
import { InputText } from 'primereact/inputtext';

export class Header extends Component {

    constructor(props) {
        super(props);

        this.items = [
            {
                label: 'File',icon: 'pi pi-fw pi-file',items: [
                    {
                        label: 'New',icon: 'pi pi-fw pi-plus',items: [
                            {
                                label: 'Bookmark',icon: 'pi pi-fw pi-bookmark'
                            },{
                                label: 'Video',icon: 'pi pi-fw pi-video'
                            },]
                    },{
                        label: 'Delete',icon: 'pi pi-fw pi-trash'
                    },{
                        separator: true
                    },{
                        label: 'Export',icon: 'pi pi-fw pi-external-link'
                    }
                ]
            },{
                label: 'Edit',icon: 'pi pi-fw pi-pencil',items: [
                    {
                        label: 'Left',icon: 'pi pi-fw pi-align-left'
                    },{
                        label: 'Right',icon: 'pi pi-fw pi-align-right'
                    },{
                        label: 'Center',icon: 'pi pi-fw pi-align-center'
                    },{
                        label: 'Justify',icon: 'pi pi-fw pi-align-justify'
                    },]
            },{
                label: 'Users',icon: 'pi pi-fw pi-user',icon: 'pi pi-fw pi-user-plus',},icon: 'pi pi-fw pi-user-minus',{
                        label: 'Search',icon: 'pi pi-fw pi-users',items: [
                            {
                                label: 'Filter',icon: 'pi pi-fw pi-filter',items: [
                                    {
                                        label: 'Print',icon: 'pi pi-fw pi-print'
                                    }
                                ]
                            },{
                                icon: 'pi pi-fw pi-bars',label: 'List'
                            }
                        ]
                    }
                ]
            },{
                label: 'Events',icon: 'pi pi-fw pi-calendar',items: [
                    {
                        label: 'Edit',items: [
                            {
                                label: 'Save',icon: 'pi pi-fw pi-calendar-plus'
                            },{
                                label: 'Delete',icon: 'pi pi-fw pi-calendar-minus'
                            }
                        ]
                    },{
                        label: 'Archieve',icon: 'pi pi-fw pi-calendar-times',items: [
                            {
                                label: 'Remove',icon: 'pi pi-fw pi-calendar-minus'
                            }
                        ]
                    }
                ]
            },{
                label: 'Quit',icon: 'pi pi-fw pi-power-off'
            }
        ];
    }

    render() {
        const start = <img alt="logo" src="showcase/images/logo.png" onError={(e) => e.target.src='https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png'} height="40" className="p-mr-2"></img>;
        const end = <InputText placeholder="Search" type="text" />;

        return (
            <div>
                <div className="card">
                    <Menubar model={this.items} start={start} end={end} />
                </div>
            </div>
        );
    }
}