时间戳

首页 > 解决方案 > 如何将 React 组件连接到 Laravel Blade

javascript - 如何将 React 组件连接到 Laravel Blade

问题描述

我在将 React 添加到我的项目时遇到问题。组件未呈现。这不是SPA项目。

我试过最简单的方法。我已经使用“laravel new reactexample”设置了新项目，接下来我制作了“php artisan preset react”和“yarn run”。之后我添加了欢迎 Blade.php。

Example.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row justify-content-center">
                    <div className="col-md-8">
                        <div className="card">
                            <div className="card-header">
                                Example Component
                            </div>
                            <div className="card-body">
                                I am an example component!
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

if (document.getElementById('example')) {
    ReactDOM.render(<Example />, document.getElementById('example'));
}

Welcome.blade.php，片段

<div class="content">
    {...}
    <div id="example"></div>
    {...}
</div>

webpack.mix.js

const mix = require('laravel-mix');

mix.react('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

应用程序.js

require('./bootstrap');
require('./components/Example');

我错过了配置中的某些内容吗？我应该怎么做才能在页面上渲染组件？

标签： javascriptphpreactjslaravel

解决方案

好的，我找到了溶液。我必须补充

<script src="{{asset('js/app.js')}}" ></script>

到页面。

推荐阅读