Question

虽然从official documentation页面学习反应JS，但到目前为止一切正常，现在我尝试从另一个页面中的另一个页面导出一个方法，如下所示（每个代码段顶部的文件名）

的src /为greeting.js

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>
    );
  }
}

导出默认的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找不到模块：无法解决＆＃39;问候＆＃39;在＆＃39; / opt / rqt / src＆＃39;

为什么我收到此错误？

我是否需要在Greeting.js中创建一个类而不是直接导出函数？

Answer 1

您收到该错误是因为您导入的模块不正确。如果你这样做：

import Greeting from 'Greeting';

您的编译器将在node_modules中查找文件（可能还有其他目录，具体取决于您的配置）。

由于它位于同一目录中，您必须将其导入为：

import Greeting from './Greeting';

基本上./表示该文件存在于当前工作目录中。

Answer 2

另一种可能的解决方案

FWIW 当我在脚本中的多行中使用不同的导入语法方法从单个库导入时遇到了这个问题。

为什么这会发生在我身上？

发生这个问题是因为我会像这样手动导入： ToString()，然后在我编码时，VS Code 会自动引入新的导入。所以，我最终会在我的脚本中得到这个：

import { Stuff, Things } from 'some-library'

出于某种原因，当发生这种情况时，会抛出此错误。

技术栈

Next.js
材质界面

找不到模块：无法解析＆＃39; moduleName＆＃39;在反应中

2 个答案:

另一种可能的解决方案

为什么这会发生在我身上？

技术栈