Question

所以我正在建立一个ReactJS网站/应用程序并掌握一些事情。我试图拥有多个可重复使用的代码组件（为了节省我的时间）并习惯它，我已经制作了这个占位符组件

import React from 'react';
import { Image } from 'semantic-ui-react';
import '../App.css';

const PlaceholderImage = () => (
    <Image src="../images/wip.gif" fluid/>
)

export const PlaceholderImage;

我试图在另一个页面中调用它......

import React, { Component } from 'react';
import { PlaceholderImage } from '../components/placeholder';
import '../App.css';

class App extends Component {
    render () {
        return (
            <div>
                <PlaceholderImage/>
            </div>
        );
    }
}

export default App;

这两个文件都在我的src文件夹中，但我的组件保存在components文件夹中，页面保存在我的routes文件夹中。

当我尝试用纱线构建它时，我在半冒号上得到意外的令牌错误。我尝试过其他导出方法，如

export default PlaceholderImage;
export () => PlaceholderImage;

知道我哪里错了吗？

提前干杯！

Answer 1

您使用const

声明PlaceholderImage两次

尝试：

const PlaceholderImage = () => (
    <Image src="../images/wip.gif" fluid/>
)

export default PlaceholderImage;

和

import PlaceholderImage from '../components/placeholder'; // without brackets

Answer 2

export default PlaceholderImage;

import PlaceholderImage from '../components/placeholder'; // without {}

ReactJS导出函数用于其他文件

2 个答案: