大家好,我一直在尝试在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相同的目录中,并调整路径,它会工作得很好
发布于 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>
);
}
https://stackoverflow.com/questions/54254553
复制相似问题