在 Laravel 刀片模板中调用 ReactJS 组件

Posted 2023-02-22

【中文标题】在 Laravel 刀片模板中调用 ReactJS 组件

【英文标题】：call to ReactJS component in Laravel blade templates

【发布时间】：2017-09-30 05:59:43

【问题描述】：

我使用 Laravel 5.4 和 React 15.5.4，代码是用 ES6 编写的。

我想替换 Vue 并使用 React，我做到了。但是我经常会在刀片模板的不同地方使用小组件，例如2。我不想使用一个应用组件。

我想使用类似的东西：

<span class="react">
<TestComponent property=true />
</span>

我不能自动完成。现在我用

<span data-component="TestComponent" data-props="property:true" />

在 app.js 中

_.each(document.querySelectorAll('[data-react]'), element => 
  let props =;
  Array.prototype.slice.call(element.attributes)
  .forEach(item => 
    props[item.name] = item.value;
    if(item.name !== 'data-react')
      element.removeAttribute(item.name);  
    

  );
  ReactDOM.render(React.createElement(reactComponents[element.getAttribute('data-react')],props),element);
);

它有效，但我需要使用将所有属性添加到一个反应组件属性，然后使用例如this.props.out.propery

我也想在刀片组件中设置普通组件标签

我尝试在 app.js 中使用

_.each(document.querySelectorAll('.react'), item =>   
  ReactDOM.render(item.children,item);
);

有人有办法解决这个问题吗？

---

编辑

我将解决方案更改为：

<span data-react="LoginForm" input="json(request()->old())" error="session('error')" errors="json($errors->getMessages())" /> 

或

<LoginForm data-react="LoginForm" input="json(request()->old())" error="session('error')" errors="json($errors->getMessages())" /> 

在刀片和resources/assets/js/app.js

var reactComponents = 
  LoginForm: require('./components/login').default,
;
_.each(document.querySelectorAll('[data-react]'), element => 
  let props =;
  Array.prototype.slice.call(element.attributes)
  .forEach(item => 
    props[item.name] = item.value;
  );
  ReactDOM.render(React.createElement(reactComponents[element.getAttribute('data-react')],props),element);
);

它工作正常。这不是超级明确的解决方案，但我认为这是合理的。 我可以在 html 代码中设置组件名称并添加几乎与 JSX 中相同的道具。

【参考方案1】：

据我所知，您不能直接将 JSX 组件与 Blade 模板混合使用。目前唯一可用于 React 的服务器端渲染是 NodeJS。 你可以做些什么来改进你的架构是添加具有特定 id 的特定 HTML 标签并在其中呈现反应组件。所以在 Blade 中你可以这样做：

<div id="componentA"></div>

这将在您的 Blade 模板中充当该反应组件的占位符。然后你从你的 app.js 渲染你的 componentA ，如下所示：

React.render(<ComponentA prop1='valueX'/>, document.getElementById("componentA"))

请记住，在这种情况下，react 世界和 Blade 世界在不同时间运行。

【讨论】：

谢谢，我想自动调用组件名称并在 html 标签内设置道具。我在编辑我的帖子时添加了我的解决方案

【参考方案2】：

您可以使用document.getElementsByTagName('LoginForm') 获取所有实例，然后迭代其属性。这是清晰的代码，但不是通用的，因为它只适用于 LoginForm 组件。

如果您想呈现任何标签名称，那么最好使用与 data-react 一起使用的某些属性。

getElementsByTagName 不受 old browsers 的超级支持，因此使用 jQuery 作为后备 $('LoginForm') 可能是个好主意