代码之家 › 专栏 › 技术社区 › Tomas

laravelreactjs:在我的js(ReactJs)文件发生更改后,更改不会反映出来

react-material laravel reactjs javascript

Tomas · 技术社区 · 6 年前

我用的是在里面 拉威尔 。在这里,我对React组件进行了一些更改,当我刷新浏览器时,更改不会显示。

文件夹:

资源/视图/欢迎使用.blade.php

<!doctype html>
<html lang="{{ app()->getLocale() }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>arjunphp.com | Laravel 5.6 with React JS</title>
        <link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css">
    </head>
    <body>
        <div id="example"></div>
        <script src="{{asset('js/app.js')}}" ></script>
    </body>
</html>

资源/资产/js/应用程序js

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes React and other helpers. It's a great starting point while
 * building robust, powerful web applications using React + Laravel.
 */

require('./bootstrap');

/**
 * Next, we will create a fresh React component instance and attach it to
 * the page. Then, you may begin adding components to this application
 * or customize the JavaScript scaffolding to fit your unique needs.
 */

require('./components/Example');

资源/资产/js/组件/示例.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button'

export default class Example extends Component {
    render() {
        return (
            <div className="container">
                <div className="row">
                    <div className="col-md-8 col-md-offset-2">
                        <div className="panel panel-default">
                            <div className="panel-heading">Example Component</div>

                            <div className="panel-body">
                                I'm an example component tomas!
                            </div>
                            <Button size="small" color="primary" href="#" target="_blank">
                                Go To Course
                            </Button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
}

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

屏幕截图 :

2 回复 | 直到 6 年前

Puria Golgoon 6 年前

你编译了吗react.js公司如果没有代码:

npm run dev

清除浏览器缓存以查看更改

Laravel文档

记住,每次更改时都应该运行npm run dev命令 Vue组件。或者,您可以运行npm run watch命令来监视并且每次都自动重新编译组件被改进的。

Michael Harley Pawan Maheshwari 6 年前

试试这个方法,叫做实时重新加载。

去 webbpack.mix.js

mix.browserSync('localhost:8000');

其中的参数取决于您的php artisan服务的url和端口。

npm run watch 安装browserSync方法所需的依赖项。
php artisan serve 和 npm运行监视

希望这能有所帮助。

如果是工作,别忘了鼓掌。

资料来源: https://medium.com/@michael.tandio/easy-setup-hot-loader-for-react-laravel-with-laravel-mix-8f68a1393624

Roman Patutin 6 年前

更新组件后,在控制台中运行以下命令:

npm run dev

Akansha Gupta 5 年前

只需在控制台中运行以下命令:

npm run

浏览器现在将根据文件更改自动更新

simphiwe sifiso hlabisa 5 年前

如果你用的是chrome。打开“匿名”选项卡并使用“匿名”选项卡,它会在重新加载时自动清除缓存