Question

大家好我有一个问题..我的应用程序中有几个组件..我希望这些组件在一个组件名称中作为main.js然后我将此组件导出到app.js但我得到这样的

./src/components/main.js
 Module not found: Can't resolve './components/join' in 
'C:\Users\Ahmad\letschat\src\components'

如果我删除这些组件，其他组件也会出现相同的错误..为什么它即将发生我不知道解决这种错误，因为我是reactjs的新手。这是我的main.js组件

import React, { Component } from 'react';
import Login from './components/login';
import Messageonline from './components/message&online';
import SendMessage from './components/typemessage';
import Join from './components/join';



class Main extends Component {
constructor()
{
super();
this.state={temp:
[],counter:1,yourid:'',yourname:'',yourgender:'',ComingMessage:[]};
this.handleLogin=this.handleLogin.bind(this);
this.userview=this.userview.bind(this);
//this.receivingvaluefromlogin=this.receivingvaluefromlogin.bind(this);
this.going=this.going.bind(this);
this.comingmessage=this.comingmessage.bind(this);
this.handlejoin=this.handlejoin.bind(this);
// let temp = [];

}
going(id,name,gender)
{
console.log("THIS IS DONE BY REACT GEEK:",id,name,gender);
this.setState({yourid:id,
  yourname:name,
  yourgender:gender});
// console.log("THIS IS DONE BY REACT GEEKaefljhjo:",yourid);
}
async comingmessage(message)
{
console.log('here is the coming props by message box',message);
// this.setState({ComingMessage:this.state.ComingMessage.push(message)});
await this.state.temp.push(message);
this.setState({ComingMessage:this.state.temp});
 //  this.state.ComingMessage.push(message)
// console.log(this.state.ComingMessage);
}
handleLogin()
{
this.setState({counter:2});
}
handlejoin()
{
this.setState({counter:4});
console.log('this is join');
}
userview()
{
this.setState({counter:3});

console.log('are you calling');

}
 render() {
 return (

  <div className="App">
           {this.state.counter===2?
           <div >

          {/* <img src={require("../src/images/logo.png")} style=
{{maxWidth:'80vh',maxHeight:'100vh'}}alt={''}/>  */}

           <Login  show={this.userview} passingvalue={this.going} />

           </div>
           :null}
           {
             this.state.counter===1?

          <div>
      <div >
      {/* <img src={require("../src/images/logo.png")} style=
  {{maxWidth:'80vh',maxHeight:'100vh'}}alt={''}/>  */}
        </div>

        <button type="button" className="btn btn-primary" onClick=
  {this.handleLogin}>Sign In</button>&nbsp;
        <button type="button" className="btn btn-info" onClick=
  {this.handlejoin}>Join Live chat</button> 
        </div>     
        :null}

  { this.state.counter===3?

          <div>

        <Messageonline LoggedInUser={{
      yourid: this.state.yourid,
      yourname: this.state.yourname,
      yourgender: this.state.yourgender
            }}  
      UserMessag={this.state.ComingMessage}/>

         <SendMessage passingmessage={this.comingmessage}/>
        </div>     
        :null}

       {this.state.counter===4?
      <div>

       <Join />
       </div>:null} 
   </div>
      );

    }
   }
   export default Main;

我希望这个组件在我的app.js中请帮助我，我有很多工作要做，但我的时间很短...它的工作完全whwn我在app.js中有所有这些代码，但我想要它在main.js组件中...请帮助...谢谢

Answer 1

Can't resolve './components/join'表示文件结构中不存在“components / join.js”文件。确保该文件存在且位于同一路径。从我看到的是，当您将组件从app.js移动到main.js时，文件路径不再对join.js文件有效。

在调用所有组件时遇到错误

1 个答案: