2017-10-10 12 views
0

official documentationページから反応しているJSを反応させている間、すべての作業がうまくいきました。今度は別のページの別のページ/ Greeting.jsモジュールが見つかりません:反応js内の 'moduleName'を解決できません

function UserGreeting() { 
    return <h1>Welcome back!</h1>; 
} 

function GuestGreeting() { 
    return <h1>Please sign up.</h1>; 
} 

function Greeting(props) { 
    const isLoggedIn = props.isLoggedin; 
    if(isLoggedIn) { 
     return <UserGreeting />; 
    } else { 
     return <GuestGreeting />; 
    } 
} 

export default Greeting; 

のsrc/LoginControl.js

import React from 'react'; 

import Greeting from 'Greeting'; 

function LoginButton(props) { 
    return <button onClick={props.onClick}>Login</button>; 
} 

function LogoutButton(props) { 
    return <button onClick={props.onClick}>Logout</button>; 
} 

class LoginControl extends React.Component { 


    constructor(props) { 
    super(props); 
    this.handleLoginClick = this.handleLoginClick.bind(this); 
    this.handleLogoutClick = this.handleLogoutClick.bind(this); 
    this.state = {isLoggedIn: false}; 
    } 

    handleLoginClick() { 
    this.setState({isLoggedIn: true}); 
    } 

    handleLogoutClick() { 
    this.setState({isLoggedIn: false}) 
    } 

    render() { 
    const isLoggedIn = this.state.isLoggedIn; 
    let button = null; 
    if(isLoggedIn) { 
     button = <LogoutButton onClick={this.handleLogoutClick} />; 
    } else { 
     button = <LoginButton onClick={this.handleLoginClick} />; 
    } 
    return (
     <div> 
      <Greeting isLoggedIn={isLoggedIn} /> 
      {button} 
     </div> 
    ); 
    } 
} 
各スニペットの上部)

SRCに名前を付けます

デフォルトのLoginControlをエクスポートします。

のsrc/index.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import LoginControl from './LoginControl'; 


ReactDOM.render(
    <LoginControl />, 
    document.getElementById('login') 
); 


ReactDOM.render(<App />, document.getElementById('root')); 

公共/ index.htmlを

<body> 
    <div id="root"></div> 
    <div id="login"></div> 
</body> 

が、それは、ブラウザでエラーの下になりますか?

./src/LoginControl.jsモジュールが見つかりません: 'は/ opt/RQT/srcに'

なぜ私はこのエラーを取得していますの '挨拶' を解決できませんか?

関数を直接エクスポートするのではなく、Greeting.jsでクラスを作成する必要がありますか?

答えて

1

モジュールを正しくインポートしていないため、このエラーが発生しています。 そうした場合:

import Greeting from 'Greeting'; 

あなたのコンパイラは、(あなたの設定に応じて、そしておそらく他のディレクトリ)node_modulesでファイルを探します。


それは同じディレクトリにありますので、あなたのようにそれをインポートする必要があります。基本的には

import Greeting from './Greeting'; 

./すると、ファイルは現在の作業ディレクトリに存在することを意味します。

+0

ありがとうございます。しかし、 'import'はデフォルトディレクトリを呼び出した場所と同じではないと考えていますか? –

+0

@ pro.mean最新の回答を参照してください。 – Chris

+0

'React、{Component}}をあなたの提案と共に* Reeting; *の上に追加した後はうまく動作します。しかし、Greeting.jsでReactをどこで使ったのですか?なぜそれは必要ですか? –

関連する問題