为什么我的React Component Export无法正常工作? [英] Why does my React Component Export not work?

问题描述

我只是开始做出反应并亲自尝试一下.经过数小时的配置webpack，只是想在屏幕上打个招呼，我想现在可以开始了，但是尝试从文件中渲染另一个组件之后，下一个问题就解决了.

I was just getting into react and trying it out for myself. After hours of configuring webpack just to get a hello world on my screen I thought I could get going now but after trying to render another component from a file the next problem.

我的主文件是app.js，它呈现所有内容:

My main file is app.js, which renders everything:

import React from 'react';
import ReactDOM from 'react-dom';
import {Hello} from './hello';

ReactDOM.render(
   <Hello/>,
   document.getElementById('app')
);

Hello组件来自同一文件夹中的hello.js:

The Hello component comes from my hello.js in the same folder:

import React from 'react';

class Hello extends React.Component{
   render(){
       return (
           <h1>Hello, world!</h1>
       )
    }
}

export default Hello;

当我仅在app.js中执行所有操作而没有导入/导出时，它表现得很好.它也可以编译.但是控制台中现在有很多错误.那我想念什么?

It was rendering fine when I was doing everything just in app.js without the import/export. It also compiles fine. But there are a lot of errors now in the console. So what am I missing?

谢谢

Gerd

推荐答案

由于您的导出是默认，因此不需要在导入组件名称周围加括号:

Because your export is default you don't need braces around your import component name:

import Hello from './hello';

这是Axel Rauschmayer撰写的关于最终ES6的详细技术文章您可能会发现有用的模块语法.

Here's a verbose technical article from Axel Rauschmayer on the final ES6 modules syntax that you might find useful.

这是关于同一个主题的文章，它的技巧性稍差.

And here's a slightly less techy post about the same topic.

这篇关于为什么我的React Component Export无法正常工作?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！