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

和我的频道

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')
),

Answer 2

部分解决方案归功于@jamesemanon，另一方面归功于@azium。

所以，我遇到的问题是：

确保关闭代码
由于某种原因，我不得不使用导出默认值而不仅仅是出口
我必须将ChannelList导入到我的main.js文件中：import ChannelList来自'./Channel';

感谢你们的帮助，我希望将来其他人也可以从中受益

每当我向React JS

2 个答案: