如何在 Blade 视图内的 React 组件中插入 Blade 代码？答案

【问题标题】：How to insert Blade code in a React component inside a Blade view?如何在 Blade 视图内的 React 组件中插入 Blade 代码？
【发布时间】：2022-02-05 01:13:30
【问题描述】：

所以我有一个名为homepage.blade.php 的 Laravel 视图，它包含以下内容：

<body>
   <div id=root></div>
   <script src="./js/app.js"></script>
</body>

内部app.js：

import React from "react";
import ReactDOM from "react-dom";
import SignUp from "./components/SignUp";

if (document.getElementById("root")) {
    ReactDOM.render(<SignUp />, document.getElementById("root"));
}

在SignUp.js内部：

import React from "react";
export default function SignUp() {
    return (
<span className="text-xs font-bold uppercase"> Welcome, {!! auth()-> user() -> name !!} </span>
}

homepage.blade.php 由控制器中的函数调用，如下所示：

//inside the function in the Controller.php:
$user = User::create($attributes);
auth()->login($user);
return redirect('/homepage');    // homepage redirects to homepage.blade.php

问题：我无法在 React 组件 SignUp.js 中插入行 {!! auth()-> user() -> name !!}，它将被插入到 homepage.blade.php 视图中。

问题：有没有办法在 React 组件中插入 Blade 代码？有没有更好的方法来做到这一点？

【问题讨论】：

标签： php html reactjs laravel laravel-blade

【解决方案1】：

你不能在 js 文件中使用刀片。正确的方法是，使用 <script></script> 标签在刀片文件中定义变量，如下所示：

<script>
   const window.username = '{!! auth()-> user() -> name !!}';
   <script src="./js/app.js"></script>
</script>

然后使用 app.js 文件中定义的变量

【讨论】：

app.js 实际上并不包含我需要放置变量的 JSX，它只是检查调用它的视图是否包含 id="root" 的 div，如果是，则它呈现包含 JSX 的实际 React 组件来代替 id 为“root”的 div（请查看帖子）。有没有办法将此变量从 app.js 传递给 SignUp.js（这是包含我应该放置变量的 JSX 的 React 组件）？
我没有太多的反应知识，但是刀片文件中定义的变量是一个全局变量，我认为您可以在 SignUp.js 文件中访问它。根据这个链接你可以做到link

【解决方案2】：

你不能这样做。 Blade 仅适用于 MIME 类型 PHP 的脚本。您必须使用 .php 加载您的 JS 文件，以便可以呈现您的脚本。您可以这样做：

设置header让调用者知道它是一个JS文件。
在 js 中设置刀片代码。并在 PHP 中更改文件扩展名。
将 JS 文件放入您的视图（您的 MVC）中，将其重命名为 .php 并在您的控制器上放置一个标题。这应该可行。

【讨论】：