web-dev-qa-db-fra.com

L'importation dynamique dans React ne fonctionne pas lorsque vous essayez d'importer un composant dans un autre répertoire

Bonjour à tous, j'ai essayé d'importations dynamiques dans react pour rendre mes composants pour une application créée avec CRA (create-react-app) et bien que cela fonctionne parfaitement dans certains cas, mais pour certains, il renvoie une erreur de module impossible à charger, par exemple j'ai chargé un composant (placé dans un répertoire sous src) dynamiquement dans mon index.js qui fonctionne très bien mais quand j'essaie de rendre un enfant ou un composant imbriqué à l'intérieur qui avec une approche d'importation dynamique, il donne une erreur ne peut pas charger le module. Notez que cette erreur se produit uniquement si le composant imbriqué est placé en dehors du répertoire du composant parent d'origine suffisamment parler ici est le code.

Mon index.js placé sous 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 placé dans le répertoire Composants sous src.

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 placé dans le répertoire FooterComp sous src.

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;

Pourquoi cela fonctionne-t-il lorsque je réfère mon premier composant depuis mon index.js mais ne fonctionne pas pour le composant pied de page lorsque j'essaie d'importer dans mon premier composant?

Message d'erreur: Error: Cannot find module '../FooterComp/Footer'

Notez également que si je place le composant Footer dans le même répertoire que Firstcomponent et ajuste le chemin, cela fonctionne bien

reactjsdynamic-import
4
JayD

Si FooterComp est sous src, le chemin doit être './FooterComp/Footer' ne pas '../FooterComp/Footer'

Modifier

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
Derf Mongrel