Question

我想为我的应用程序创建一个登录页面。我按照npmjs website上的说明创建了一个新组件'LoginPage'，并在其中复制和粘贴了教程的代码（加上导入React）：

App.js代码：

<Style TargetType="{x:Type DataGrid}" BasedOn="{StaticResource {x:Type DataGrid}}">
    <Setter Property="ap:TiltWheelHorizontalScroller.EnableTiltWheelScroll" Value="True"/>
</Style>

这是Login.js组件的代码：

import React, { Component } from 'react';
import './App.css';

import GiftList from "../GiftList/GiftList";
import GiftItems from "../GiftItems/GiftItems";
import LoginPage from "../Login/Login";

class App extends Component {
    constructor(props) {
        super(props);

        this.state = {
          items: [],
          currentItem: {text:'', key:''},
        };

        this.handleInput = this.handleInput.bind(this);
        this.addItem = this.addItem.bind(this);
    }

    handleInput = e => {
        const itemText = e.target.value;
        const currentItem = {
            text: itemText,
            key: Date.now()
        };
        this.setState({
            currentItem,
        });
    }

    addItem = e => {
        e.preventDefault();
        const newItem = this.state.currentItem;
        if (newItem !== '') {
            console.log(newItem);
            const items = [...this.state.items, newItem];
            this.setState({
                items: items,
                currentItem: { 
                    text: '',
                    key: ''
                }
            });
        }
    }

    deleteItem = key => {
        const filteredItems = this.state.items.filter(item => {
            return item.key !== key
        })
        this.setState({
            items: filteredItems,
        })
    }

    render() {
        return (
            <div className="App">
                <h1>Gift App</h1>
                <div className="App">
                    <div className="GiftList">
                        <GiftList 
                            addItem={this.addItem} 
                            inputElement={this.inputElement} 
                            handleInput={this.handleInput}
                            currentItem={this.state.currentItem} 
                        />
                    </div>
                    <div className="GiftItems">
                        <GiftItems 
                            entries={this.state.items} 
                            deleteItem={this.deleteItem} 
                        />
                    </div>
                    <div className="Login">
                        <LoginPage />
                    </div>
                </div>
            </div>
        );
    }
}

export default App;

我不断收到此错误：

编译失败 ./src/components/Login/Login.js找不到模块：无法解决 '... / todoProject / todo-list / node_modules / react-scripts / node_modules / babel-loader / lib / index.js' 在 '... / todoProject / todo-list'

我不确定babel是否真的是问题所在，因为当我从App.js文件中删除LoginPage组件时，我的代码工作正常。但是以防万一这是babel的问题，我按照this thread的步骤进行操作，但仍然有相同的错误。

有人使用过ReactSignupLoginComponent吗？您是如何工作的？我需要克隆整个git存储库以供使用吗？

package.json：

    import React from 'react';
import ReactSignupLoginComponent from 'react-signup-login-component';

const LoginPage = (props) => {
    const signupWasClickedCallback = (data) => {
        console.log(data);
        alert('Signup callback, see log on the console to see the data.');
    };
    const loginWasClickedCallback = (data) => {
        console.log(data);
        alert('Login callback, see log on the console to see the data.');
    };
    const recoverPasswordWasClickedCallback = (data) => {
        console.log(data);
        alert('Recover password callback, see log on the console to see the data.');
    };

    return (
        <div>
            <ReactSignupLoginComponent 
                title="To Do List" 
                handleSignup={signupWasClickedCallback} 
                handleLogin={loginWasClickedCallback} 
                handleRecoverPassword={recoverPasswordWasClickedCallback}
            />
        </div>
    );
};

export default LoginPage;

如何实现ReactSignupLoginComponent？找不到模块：无法解析“ ... / node_modules / babel-loader / lib / index.js”

0 个答案: