Question

我已经在我的laravel应用程序中集成了reactjs，它可以很好地工作以使用api来获取数据。但是视图的布局已被破坏。我使用的模板在添加react js之前运行良好。看起来像这样：

即使我没有使用react组件，每个页面的顶部也会出现很大的空白。我的代码是：

master.blade.php

<!DOCTYPE html>
<html class="no-js h-100" lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title>{{ config('app.name', 'BVend') }}</title>
        <meta name="description" content="">
        <meta name="csrf-token" content="{{ csrf_token() }}">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
        <!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> -->
        <link rel="stylesheet" id="main-stylesheet" data-version="1.1.0" href="{{asset('template/styles/shards-dashboards.1.1.0.min.css')}}">
        <link rel="stylesheet" href="{{asset('template/styles/extras.1.1.0.min.css')}}" type="text/css">
        <link rel="stylesheet" href="{{asset('template/styles/app.css')}}" type="text/css">
        <link rel="stylesheet" href="{{asset('css/app.css')}}" type="text/css">
    </head>
    <body class="h-100">
        <div class="container-fluid">
            <div class="row">
                <!-- Main Sidebar -->
                @yield('sidebar')
                <!-- End Main Sidebar -->
                <main class="main-content col-lg-10 col-md-9 col-sm-12 p-0 offset-lg-2 offset-md-3">
                    <!-- Main Navbar -->
                    @include('layouts.nav')
                    <!-- / .main-navbar -->
                    <div class="main-content-container container-fluid px-4">
                        <div class="page-header row no-gutters py-4">
                            <div class="col-12 col-sm-4 text-center text-sm-left mb-0">
                                <span class="text-uppercase page-subtitle">@yield('subtitle')</span>
                                <h3 class="page-title">@yield('title')</h3>
                            </div>
                        </div>
                        @yield('content')
                    </div>
                </main>
            </div>
        </div>

        <script async defer src="https://buttons.github.io/buttons.js"></script>
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"></script>
        <script src="https://unpkg.com/shards-ui@latest/dist/js/shards.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/Sharrre/2.0.1/jquery.sharrre.min.js"></script>
        <script src="{{asset('template/scripts/extras.1.1.0.min.js')}}"></script>
        <script src="{{asset('template/scripts/shards-dashboards.1.1.0.min.js')}}"></script>
        <script src="{{asset('template/scripts/app/app-blog-overview.1.1.0.js')}}"></script>
        <script src="{{asset('js/app.js')}}"></script>
    </body>
</html>

content.blade

@section('content')
<div class="row">
    <div class="col">
        <div class="card card-small mb-4">
            <div class="card-header border-bottom">
                <ul class="nav">
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ route('show_machines') }}">All Machines</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link active" href="{{ route('create_machine') }}">Create Machine</a>
                    </li>
            </div>
            <div class="card-body p-0 pb-3 text-center">
                    <div id='app'></div>
            </div>
        </div>
    </div>
</div>
@endsection

应用（响应）

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

export default class Locker extends Component {
    constructor() {
        super();
        this.state = {
            lockers: [
                {
                    "id": 1,
                    "machine_id": 1,
                    "product_id": 0
                },
                {
                    "id": 2,
                    "machine_id": 1,
                    "product_id": 0
                },
                {
                    "id": 3,
                    "machine_id": 1,
                    "product_id": 0
                },
            ]
        }
    }

    render() {
        return (
            <div>
                <table className="table mb-0">
                        <thead className="bg-light">
                            <tr>
                                <th scope="col" className="border-0">Locker No.</th>
                                <th scope="col" className="border-0">Product</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.lockers.map((locker, key) => 
                                (
                                    <tr key={key}>
                                        <td>{locker.id}</td>
                                        <td>{ locker.product_id }</td>
                                    </tr>
                                )
                            )}
                        </tbody>
                </table>
            </div>
        );
    }
}

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

将主管放错位置后

Answer 1

好吧，我知道了。我已经包含了来自reactjs预设的css，其中还包括我之前包含的bootstrap.css。因此从master.blade.php中删除了以下行并全部设置：

<link rel="stylesheet" href="{{asset('template/styles/app.css')}}" type="text/css">

添加React JS Laravel

1 个答案: