我有时使用Inertia的内置usePage-Hook for React来访问传递的props。当您使用所有前端组件都可以访问的共享数据时，这会很方便（https://inertiajs.com/shared-data）。只要您的后端（Laravel）代码工作正常，实际的categories-属性被移交给Categories-Component或共享给所有前端，您可以执行如下操作：

import React from 'react';    
import { usePage } from '@inertiajs/inertia-react';
    
    function App() {
        const categories = usePage().props.categories;
    
        return (
            <ul>
                {categories.map((category) =>
                    (<li>{category}</li>))}
            </ul>
        );
    }

然而，对我来说，最常见的做法是简单地给予与你在Laravel中传递给惯性组件和React组件 prop 相同的变量名，就像这样。对我来说，这看起来应该完全适合你的用例：

import React from 'react';    
    
    function App({categories}) {        
        return (
            <ul>
                {categories.map((category) =>
                    (<li>{category}</li>))}
            </ul>
        );
    }

如果你想找到更多关于Inertia的信息，我强烈建议你阅读文档。开发人员在解释方面做得很好，这样一个没有经验的Laravel和React Dev就可以理解发生了什么。它实际上读起来不多，但显示了一些有趣的功能：https://inertiajs.com/