我可以在 laravel 网站的某些视图中使用 React

Question

我有一个 laravel 网站，该网站目前正在使用 blade 视图模板，我正在考虑在某些视图中使用 React JS。

我想知道是否可以在某些视图中使用 React，同时仍然让 blade 模板呈现某些视图。

或者我是否必须重写整个网站才能使其正常工作。

Answer 1

好的，这里有一些示例代码可以帮助您开始使用 React：

编写一个测试反应应用程序，例如test.jsx 在您的 resources/js 中（如果您使用的是打字稿，则为 .tsx）。它可能看起来像：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import App from './App';

const root = document.getElementById('react-root');
if (root) {
  ReactDOM.render(
     <App />,
      root
  );
}

此处 App 是您要替换的功能的 React 组件根。

您也可以将其添加到您的 webpack.mix.js 文件中以独立转译它或将其导入您的 app.js（这更容易）。但是，在后一种情况下，您要在所有视图中加载此代码，如果有另一个页面的元素带有 id react-root，则会出现问题。

您的 blade 现在将变为：

@extends('layouts.index')
@section('content')
    <div id="react-root"></div>
@endsection

当然这里说得太简单了。您可以仅替换具有您正在转换的功能的部分 <div id="react-root"></div> 并从那时起反应处理该部分。

您也可以在单个 .blade.php 文件中多次执行此操作，方法是对不同的根元素多次调用 ReactDOM.render。 React 将完全负责其呈现的根元素下的所有内容，其余代码将像以前一样继续运行。但是请注意，依赖于元素选择器的代码通过例如jQuery 不应用于操作 React 管理的节点，因为这可能会导致问题。

我可以在 laravel 网站的某些视图中使用 React

Can I use react in some view of my laravel website

model-view-controller

laravel

reactjs

react-router

laravel-blade