首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >尝试导入另一个目录中的组件时,react中的动态导入不起作用

尝试导入另一个目录中的组件时,react中的动态导入不起作用
EN

Stack Overflow用户
提问于 2019-01-18 21:00:38
回答 1查看 17K关注 0票数 9

大家好,我一直在尝试在react中动态导入,为使用CRA (创建-反应-应用)创建的应用程序渲染我的组件,虽然它在某些情况下工作得很好,但对于某些情况,它会返回一个无法加载模块的错误,例如,我在index.js中动态加载了一个组件(放在src下的一个目录中),它工作得很好,但当我尝试在其中渲染子组件或嵌套组件时,它也使用动态导入方法,它会给出错误:无法加载模块。注意:只有当嵌套的组件放在原始父组件的目录之外时,才会发生此错误。

我的index.js放在src下。

    import React, { Component } from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';

    class Dynamic extends Component {
      constructor(props) {
        super(props);
        this.state = { module: null };
      }
      componentDidMount() {
          console.log('in comp mount')
          //alert("in comp mount")
        const { path } = this.props;
        import(`${path}`)
          .then(module => this.setState({ module: module.default }))
     }
      render() {
          console.log('in render')
         // alert("in render")
        const { module: Component } = this.state; // Assigning to new variable names @see: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
        return(
          <div>
            {Component && <Component path= '../FooterComp/Footer' />}
          </div>
        )
      }
    }

ReactDOM.render(<Dynamic path='./Components/FirstComponent' />, document.getElementById('root'));

FirstComponent.js位于src下的Components目录中。

import React, { Component } from 'react';
import logo from '../logo.svg';
import '../FirstApp.css';

class App extends Component {

    constructor(props) {
    super(props);
    this.state = { module: null };
  }
  componentDidMount() {
      console.log('in comp mount')
      //alert("in comp mount")
    const { path } = this.props;
    alert(path)
    import(`${path}`)
      .then(module => this.setState({ module: module.default }))
 }

  render() {
      const { module: Component } = this.state;
    return (
      <div className="App">
        <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        {Component && <Component />}
      </div>
    );
  }
}

export default App;

Footer.js放在src下的FooterComp目录中。

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

class Footer extends Component {
    componentDidMount()
    {
        console.log('in componentDidMount of Footer')
    }
  render() {
      console.log('in render of Footer')
    return (
      <div className="App">
        <h1>Edited by Me</h1>
      </div>
    );
  }
}

export default Footer;

为什么当我从我的index.js引用我的第一个组件时,这个方法起作用了,但是当我试图导入我的第一个组件时,页脚组件就不起作用了?

错误消息:Error: Cannot find module '../FooterComp/Footer'

还请注意,如果我将页脚组件放在与Firstcomponent相同的目录中,并调整路径,它会工作得很好

EN

回答 1

Stack Overflow用户

发布于 2019-01-18 22:06:15

如果FooterComp在src下,则路径应为'./FooterComp/Footer'而不是'../FooterComp/Footer'

编辑

Index.js

    render() {
          console.log('in render')
         // alert("in render")
        const { module: Component } = this.state; 
        return(
          <div>
            {Component && <Component path='./Components/FirstComponent' />}
          </div>
        )
      }
    }

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

FirstComponent.js

render() {
      const { module: Component } = this.state;
    return (
      <div className="App">
        <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
          <p>
            Edit <code>src/App.js</code> and save to reload.
          </p>
          <a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          >
            Learn React
          </a>
        </header>
        {Component && <Component path= '../FooterComp/Footer' />}
      </div>
    );
  }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/54254553

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档