Question

我刚刚做出反应并为自己尝试。经过几个小时的配置webpack只是为了在我的屏幕上获得一个hello world我认为我现在可以开始了，但是在尝试从文件中渲染另一个组件后，下一个问题。

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

return this.UserService.search(url)
.map((data) => {
    console.log(data);
    data.result = <any> data.result.map((user, index) => ({
        // if statement causing error here
        if(user.name === null || user.name === undefined){
            // error with this if condition
        },
        id: user.id,
        name: user.name,
        type: user.type,
        password: user.password,
    }));
    return data;
}).map(data => ({
    meta: { totalItems: data.size },
    data: data.result,
}));

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

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

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

当我在没有导入/导出的app.js中执行所有操作时，它呈现正常。它编译也很好。但是现在控制台中存在很多错误。那我错过了什么？

由于

格尔德

Answer 1

由于您的导出为default，因此您不需要在导入组件名称周围添加大括号：

import Hello from './hello';

来自Axel Rauschmayer的

Here's a verbose technical article关于最终的ES6模块语法，您可能会发现它很有用。

And here's a slightly less techy post关于同一主题。

Answer 2

导入默认课程时使用

import ClassName from 'something';

当您导入其他类时，使用

import {ClassName} from 'something';

一个例子：

hello.js文件中的

import React from 'react';

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

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

在其他档案中

import Hello, {Other} from './hello';

提示：您还可以使用其他名称

导入默认类

import Component, {Other} from './hello';

为什么我的React Component Export不起作用？

2 个答案: