如何在 Laravel 上使用惯性在 React 中分页？

Question

如何在

react

中使用

inertia

上的

laravel

进行分页？

拉取分页数据：

$contacts = Contact::orderBy('name', 'asc')->paginate(10);
return Inertia::render('Contacts/index', [
    'contacts' => $contacts
]);

我知道如何在

blade

(

{{ $contacts->links() }}

) 中渲染链接，但是有没有办法在

inertia

上做到这一点，或者我是否需要为分页链接制作自己的组件？

Answer 1

对于

JSX

组件

<div className="py-10 text-center">
    {
        contacts.links.map(link => (
            link.url ?

                <Link
                    className={`p-1 mx-1 ${link.active ? 'font-bold text-blue-400 underline' : ''}`}
                    key={link.label} href={link.url} dangerouslySetInnerHTML={{ __html: link.label }} />
                :

                <span
                    className="cursor-not-allowed text-gray-300"
                    key={link.label} dangerouslySetInnerHTML={{ __html: link.label }}>
                </span>
        ))
    }
</div>

Answer 2

最简单的方法是使用链接创建自己的组件（那些仍然存在）

这是 vue 中的一个示例，但应该很容易移植以做出反应：

<template>
    <div>
        <div class="flex flex-wrap -mb-1">
            <template v-for="(link, key) in links" :key="key">
                <div v-if="link.url === null" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
                    v-html="link.label" />
                <inertia-link v-else
                    class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
                    :class="{ 'bg-blue-700 text-white': link.active }" :href="link.url" v-html="link.label" />
            </template>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            links: Array
        },
    }
</script>

Answer 3

你可以尝试这个以获得更好的反应结果:-

import DataTable from "react-data-table-component";


<DataTable
        style={{ background: "transparent" }}
        title="User"
        columns={columns}
        data={allData}
        defaultSortFieldId={1}
        sortIcon={<ArrowUpwardIcon />}
        pagination
      />