5

我在 Laravel 中使用Reactjs 。在这里我对我的 React 组件进行了一些更改，当我刷新浏览器时，没有显示更改。

文件：

  1. 资源/视图/welcome.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>

  2. 资源/资产/js/app.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');

  3. 资源/资产/js/components/Example.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'));
}

当我刷新浏览器时，我在此组件中添加了一个按钮，更改未显示在浏览器中。

屏幕截图：

在此处输入图像描述

4

6 回答 6

10

你编译 react.js 代码了吗？

如果不运行：

npm run dev

如果您没有看到更改，请清除浏览器缓存。

Laravel 文档

请记住，每次更改 Vue 组件时都应该运行 npm run dev 命令。或者，您可以运行 npm run watch 命令来监控并在每次修改组件时自动重新编译组件。

React 也需要它。

于 2018-11-22T06:53:30.350 回答
6

试试这个方法，它叫做 Live Reloading。

使用 Live Reloading，您可以在保存 .js 文件时刷新浏览器。

  1. 转到webbpack.mix.js并在底部添加：

    mix.browserSync('localhost:8000');

里面的参数取决于你的 php artisan serve url 和 port。

  1. 运行npm run watch以安装 browserSync 方法所需的依赖项。
  2. 运行php artisan serve和npm run watch（在不同的 cmd 上）

希望这有帮助。

如果是工作，别忘了给掌声。

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

于 2019-05-21T14:27:11.410 回答
1

要在文件发生任何更改后更新代码，请运行此命令

npm run watch

于 2020-11-19T10:37:13.840 回答
0

如果您使用的是铬。打开隐身标签并使用隐身标签，它会在重新加载时自动清除缓存

于 2019-11-13T07:38:35.170 回答
0

第1步：首先你必须在终端上写：

npm install
npm run dev

第 2 步： 在那之后，每当您更新任何内容时，只需编写：

npm run watch

我觉得一切都好

于 2021-03-02T02:33:44.177 回答
-1

只需在控制台中运行此命令：

npm run

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

于 2019-08-29T09:59:51.103 回答