如何将 Laravel 中的值导入 react.js答案

【问题标题】：How to import values from Laravel into react.js如何将 Laravel 中的值导入 react.js
【发布时间】：2021-10-05 02:43:49
【问题描述】：

如何将 PHP Laravel 中的变量值导入我的 React.js 前端。这甚至可以开始吗？

感谢赞比亚。

PHP 中的变量

{{$category->category_name}}

以及 react.js 中的 div

<div>{category_name}</div>

我没有从哪里开始，所以很抱歉我无法提供我所做的任何工作

【问题讨论】：

有很多方法可以从后端获取变量到前端。我真的建议您在学习像 Laravel 或使用 reactjs 这样的 MVC 框架之前，先做一些教程来了解 PHP 和 Javascript 的基础知识。 在使用框架和复杂的库之前，最好了解原始内容。
原因是，如果您在学习时尽早开始使用此类第三方包，您将能够使用普通的 JS/PHP 并始终依赖这些库来完成某些任务。它还有助于理解以后所有东西如何一起发挥作用（“在原版中”），以构建大型应用程序。我知道它没有那么有趣，因为你不能在几个小时内简单地做一些花哨的事情，但相信我经过近 20 年的发展，你会受益的。我写这个是因为你的问题告诉我你还不了解 PHP 和 Javascript 在 webdev 中的作用。一点也不。没有冒犯
@Jonathan 非常感谢，我正在学习所以这个问题。我非常希望向最好的人学习

标签： javascript php reactjs laravel

【解决方案1】：

您希望从 html 传递值以在 html 元素中作为 innerHTML 做出反应。为了实现这一点，您必须通过 ReactDOM.render 分别呈现每个 html 组件

使用内部内容设置您的 html 元素，在 ReactDOM.render 中渲染组件，然后在元素内部传递该数据。像通过任何 props.children 一样获取 React 块中的值

/* pass through as props.children */

function App(props){
return <div>Child: {props.children}</div>
}

const application = document.getElementById('application');
ReactDOM.render(<App>{application.innerHTML}</App>, application );

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<!-- pass through as props.children -->
<div id="application">From HTML</div>

【讨论】：

非常感谢@androidoverlord 我会试试这个。
太棒了！如果它对您有用@Epigie，请将其标记为已回答；）