Laravel ReactJs:在我的 js(reactjs) 文件发生变化后,变化没有反映出来

新手上路,请多包涵

我在 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>

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

  1. 资源/资产/js/组件/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'));
   }

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

屏幕截图

在此处输入图像描述

原文由 Tomas 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 266
1 个回答

你编译过 react.js 代码吗?

如果不运行:

 npm run dev

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

Laravel 文档

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

React 也需要它。

原文由 Puria Golgoon 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题