Question

我终生无法弄清为什么它不允许我将<Login/>组件导入我的<Main/>组件。我很确定我的目录路径写的正确（或者是正确吗？），这就是为什么对我来说奇怪的是它不起作用

我尝试运行npm install --save ./resources/js/components/Login，但是没有用。

这是一个Laravel项目，但我在使用React作为前端。附件是我的工作目录的图像。我该如何解决我的问题？

这里是Main.js：

import React, { Component } from 'react';
import Login from './resources/js/components/Login';
import ReactDOM from 'react-dom';

class Main extends Component {
    render() {
        return (
            <div>
            <h1 className="text-center">test</h1>
            <Login/>
            </div>
        );
    }
}

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

export default Main;

这里是Login.js：

import React, {Component} from 'react';

class Login extends Component {
    render() {
        return(
            <form>
                <div className="form-group">
                    <label htmlFor="emailInput">Email Address</label>
                    <input type="text" className="form-control" placeholder="Enter email"/>
                </div>
                <div className="form-group">
                    <label htmlFor="passwordInput">Password</label>
                    <input type="password" className="form-control" placeholder="password"/>
                </div>
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        );
    }
}

export default Login;

这里是login.blade.php：

<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        @include('partials.metadata')

        <title>Laravel</title>
        <link rel="stylesheet" href="/css/app.css" type="text/css">


    </head>
    <body>
    <main id="example">
        <div class="container-fluid">
            {{-- JSX --}}
        </div>
    </main>
        <script type="text/javascript" src="./resources/js/containers/Main.js"></script>
    </body>
</html>

为什么在尝试导入时无法识别我的组件？

0 个答案: