javascript - 每当我向 React JS 添加另一个组件时都找不到模块

Question

我正在学习有关 React 的 Udemy 教程，但这里的某些内容没有意义。每当我尝试向 .js 文件添加新组件时，都会收到一条错误消息，指出找不到组件文件。我的意思是: 最初，我有这两个文件:

我的main.js:

console.log('Hello World!');
import React from 'react';
import ReactDOM from 'react-dom';
import Channel from './Channel';
 
document.addEventListener('DOMContentLoaded', function() {
  ReactDOM.render(
    React.createElement(Channel, Object.assign({}, this.props, {name:'Ryan'})),
    document.getElementById('My-Channel')
  );
});

和我的 channel

import React from 'react';


class Channel extends React.Component {
	onClick(){
		console.log('I was clicked');
	}
	render(){
		return(
			<li onClick={this.onClick.bind(this)}>{this.props.name}</li>
			)
	}
}

export default Channel;

此代码确实有效，并显示正确的 1 项列表。

但是，当我尝试向 Channel.js 文件添加另一个组件时，它会崩溃。无论我放入什么，似乎添加另一个组件都不起作用。 例如:

import React from 'react';


class Channel extends React.Component {
	onClick(){
		console.log('I was clicked');
	}
	render(){
		return(
			<li onClick={this.onClick.bind(this)}>{this.props.name}</li>
			)
	}
}
class ChannelList extends React.Component{
	render(){
		return (
			<ul>
				<Channel name='Hardware Support'>
			</ul>
		)
	}
}
export default Channel;

每次我想创建组件时都必须创建一个新文件吗？我无法想象这种情况，那么你建议我做什么？ Here is the Exact Error I am getting

Even if I add a simple dictionary to the end of the file, I get the same error. Its as if the only thing in this Channel.js file can be the channel component

预先感谢您的帮助!

Answer 1

无法找到模块几乎总是语法错误的标志(假设文件位于正确的位置)。就你而言，它永远不会击中 export因为以下是语法错误:

class ChannelList extends React.Component{
    render(){
        return (
            <ul>
                <Channel name='Hardware Support'>
            </ul>
        )
    }
}

您缺少结束标记!

更改<Channel name='Hardware Support'>至<Channel name='Hardware Support' />

而且看起来你应该这样做:

export default ChannelList

在你的主文件中:

import ChannelList from './Channel'

ReactDOM.render(
  <ChannelList />,
  document.getElementById('My-Channel')
),