如何在Laravel的Blade模板中使用React并传递控制器数据

我来帮你搞定这个问题！当你用Laravel的React预设后，把控制器传的数据给到React组件其实有几种很实用的方法，我给你一步步拆解：

这种方法是把Laravel的数据挂载到React根元素的自定义属性上，然后在React代码里读取并传入组件，非常规范。

1. 在Blade视图里挂载数据
   找到你要渲染React组件的位置，给根元素加上data-*属性，把$datas转成JSON格式放进去。注意要处理特殊字符，避免渲染异常：

   <div id="react-app" data-datas="{{ htmlspecialchars(json_encode($datas, JSON_UNESCAPED_UNICODE)) }}"></div>
   

   这里JSON_UNESCAPED_UNICODE是为了避免中文被转成Unicode编码，让前端显示更正常。

2. 在React入口文件读取数据并传入组件
   打开你的React入口文件（默认是resources/js/app.js或者你自定义的组件入口），获取DOM元素的data属性，解析成JS对象后传给组件：

   import React from 'react';
   import ReactDOM from 'react-dom/client';
   import YourComponent from './components/YourComponent';
   
   // 获取挂载React的DOM元素
   const appRoot = document.getElementById('react-app');
   // 解析data属性里的JSON数据
   const laravelDatas = JSON.parse(appRoot.dataset.datas);
   
   // 渲染组件并传入数据
   const root = ReactDOM.createRoot(appRoot);
   root.render(<YourComponent datas={laravelDatas} />);
   

3. 在React组件里使用数据
   现在你的组件就能通过props拿到数据了，直接用就行：

   import React from 'react';
   
   export default function YourComponent({ datas }) {
     return (
       <div className="react-component">
         <h2>从Laravel拿到的数据：</h2>
         <ul>
           {/* 假设datas是数组，遍历渲染 */}
           {datas.map((item, idx) => (
             <li key={idx}>
               名称：{item.name}，描述：{item.description}
             </li>
           ))}
         </ul>
       </div>
     );
   }
   

如果你的项目比较小，或者数据不需要严格的组件隔离，也可以直接在Blade里定义全局JS变量，React组件直接引用：

1. 在Blade里定义全局变量
   在<head>或者React代码之前的位置，添加script标签定义全局变量：

   <script>
     // 把Laravel数据赋值给window全局对象
     window.laravelDatas = {{ htmlspecialchars(json_encode($datas, JSON_UNESCAPED_UNICODE)) }};
   </script>
   

2. 在React组件里直接使用
   不需要传props，直接读取全局变量即可：

   import React from 'react';
   
   export default function YourComponent() {
     const datas = window.laravelDatas;
   
     return (
       <div>
         {/* 直接用datas渲染内容 */}
       </div>
     );
   }
   

   👉 注意：这种方法会污染全局作用域，复杂项目里不推荐使用，容易引发变量冲突。

• 敏感数据处理：永远不要把敏感数据（比如用户密码、隐私信息）传递到前端，哪怕是通过React组件，一定要在控制器里过滤掉不必要的字段。
• 编译代码：每次修改React代码后，记得运行npm run dev（开发环境）或者npm run build（生产环境）来编译资源，不然修改不会生效。
• 数据格式校验：如果不确定$datas的格式，最好在React组件里做一下校验，比如用typeof或者第三方库（如PropTypes）来避免渲染报错。

内容的提问来源于stack exchange，提问作者Barbell