Question

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

我尝试了最简单的方法。我用“ laravel new reactexample”设置了新项目，接下来我做了“ php artisan预置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，fragmen

<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');

app.js

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

我是否错过了配置中的某些内容？我该怎么做才能在页面上显示组件？

Answer 1

好，我发现了牛磺酸。我必须添加

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

到页面。

如何将React组件连接到Laravel Blade

1 个答案: