ReactJS 不在 Laravel 上呈現

Question

我正在嘗試在我的 laravel (5.7) 上渲染 reactJS 一個組件，但它似乎沒有顯示出來。 這是我的文件的樣子：

歡迎.blade.php

<!DOCTYPE html>
<html lang="{{ app()->getLocale() }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}" />
    <title>React JS</title>

    <!-- Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet" type="text/css">

    <!-- Styles -->
    <link href="{{asset('css/app.css')}}" rel="stylesheet">

</head>
<body>
    <div id="root"></div>
    <script src="{{asset('js/app.js')}}"></script>
</body>
</html>

例子.js

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root"));

應用程序.js

import React from 'react';

class App extends React.Component() {
    render(){
        return (
            <div>
                <h1>Hello</h1>
                <p>What a REAVELation</p>
            </div>
        );
    }

}
export default App;

npm run watch 正在運行並且沒有顯示錯誤。

請問我在這里做錯了什么？

Answer 1

使用 defer 為我修復了它

 <script defer src="js/app.js"></script>

Answer 2

使用 defer ： defer 屬性是 boolean 屬性。

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

如果存在，它指定在頁面完成解析時執行腳本。

注意： defer 屬性僅適用於外部腳本（僅應在 src 屬性存在時使用）。

來源：MDN

合成纖維

Answer 3

當您在 App.js 中聲明 class 時，您會遇到語法錯誤。 在 JavaScript 中聲明 class 時不要使用括號。

 class App extends React.Component { render(){ return ( <div> <h1>Hello</h1> <p>What a REAVELation</p> </div> ); } } ReactDOM.render(<App />, document.getElementById("root"));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script> <div id="root"></div>

Answer 4

在<head> </head>中添加

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

解決此問題的一種方法是將供應商庫代碼提取到單獨的文件中。 為此，打開 webpack.mix.js 文件並更新其代碼，如下所示：

// webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
    .react()
    .extract(['react'])
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

ReactJS 不在 Laravel 上呈現

問題描述

4 個解決方案

解決方案1
4 2020-04-16 03:51:41

解決方案2
1 2020-08-05 19:59:04

解決方案3
0 2019-09-19 19:06:03

解決方案4
0 2022-02-08 11:12:42

ReactJS 不在 Laravel 上呈現

問題描述

4 個解決方案

解決方案1 4 2020-04-16 03:51:41

解決方案2 1 2020-08-05 19:59:04

解決方案3 0 2019-09-19 19:06:03

解決方案4 0 2022-02-08 11:12:42

解決方案1
4 2020-04-16 03:51:41

解決方案2
1 2020-08-05 19:59:04

解決方案3
0 2019-09-19 19:06:03

解決方案4
0 2022-02-08 11:12:42