反应渐进式网络应用程序，由于导入/导出而不加载

Question

我对响应式开发还很陌生，但我正在尝试创建一个带有仪表板和侧边栏布局的桌面 PWA

我有我的应用程序文件，然后是 components/sidebar/ 文件夹中的两个组件，所以里面的结构

源/ app.js

组件/ SidebarComponent.js MenuItemComponent.js

我在构建时遇到了错误。当我构建它时说“错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件）但得到：未定义。您可能忘记从定义的文件中导出组件，或者你可能混淆了默认和命名的导入。

查看MenuItemComponent的渲染方法。"​​

我已将导入更改为在末尾添加“.js”，但它不起作用

我在这里做错了什么？

App.js

    import React from 'react';
    import { Column, Row } from 'simple-flexbox';
    import { StyleSheet, css } from 'aphrodite';
    import SidebarComponent from './Components/sidebar/SidebarComponent.js';
    import HeaderComponent from './Components/header/HeaderComponent.js';
    import './App.css';

    const styles = StyleSheet.create({
        container: {
            height: '100vh'
        },
        content: {
            marginTop: 54
        },
        mainBlock: {
            backgroundColor: '#F7F8FC',
            padding: 30
        }
    });

    class App extends React.Component {

        state = { selectedItem: 'Tickets' };

        render() {
            const { selectedItem } = this.state;
            return (
                <Row className={css(styles.container)}>
                    <SidebarComponent selectedItem={selectedItem} onChange={(selectedItem) => this.setState({ selectedItem })} />
                    <Column flexGrow={1} className={css(styles.mainBlock)}>
                        <HeaderComponent title={selectedItem} />
                        <div className={css(styles.content)}>
                            <span>Content</span>
                        </div>
                    </Column>
                </Row>
            );
        }
    }

    export default App;

SidebarComponent.js

    import React from 'react';
    import { Column } from 'simple-flexbox';
    import { StyleSheet, css } from 'aphrodite';
    import LogoComponent from './LogoComponent.js';
    import MenuItemComponent from './MenuItemComponent.js';

    const styles = StyleSheet.create({
        container: {
            backgroundColor: '#363740',
            width: 255,
            paddingTop: 32
        },
        menuItemList: {
            marginTop: 52
        },
        separator: {
            borderTop: '1px solid #DFE0EB',
            marginTop: 16,
            marginBottom: 16,
            opacity: 0.06
        }
    });

    function SidebarComponent(props) {
        return (
            <Column className={css(styles.container)}>
                <LogoComponent />
                <Column className={css(styles.menuItemList)}>
                    <MenuItemComponent
                        title="Overview" 
                        onClick={() => props.onChange('Overview')}
                        active={props.selectedItem === 'Overview'}
                    />
                    <MenuItemComponent
                        title="Tickets" 
                        onClick={() => props.onChange('Tickets')}
                        active={props.selectedItem === 'Tickets'}
                    />
                    <MenuItemComponent
                        title="Ideas" 
                        onClick={() => props.onChange('Ideas')}
                        active={props.selectedItem === 'Ideas'} />
                    <MenuItemComponent
                        title="Contacts" 
                        onClick={() => props.onChange('Contacts')}
                        active={props.selectedItem === 'Contacts'} />
                    <MenuItemComponent
                        title="Agents" 
                        onClick={() => props.onChange('Agents')}
                        active={props.selectedItem === 'Agents'} />
                    <MenuItemComponent
                        title="Articles" 
                        onClick={() => props.onChange('Articles')}
                        active={props.selectedItem === 'Articles'} />
                    <div className={css(styles.separator)}></div>
                    <MenuItemComponent
                        title="Settings" 
                        onClick={() => props.onChange('Settings')}
                        active={props.selectedItem === 'Settings'} />
                    <MenuItemComponent
                        title="Subscription" 
                        onClick={() => props.onChange('Subscription')}
                        active={props.selectedItem === 'Subscription'} />
                </Column>
            </Column>
        );
    }

    export default SidebarComponent;

MenuItemComponent.js

import React from 'react';
import { bool, func, string } from 'prop-types';
import { Row } from 'simple-flexbox';
import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
    activeBar: {
        height: 56,
        width: 3,
        backgroundColor: '#DDE2FF',
        position: 'absolute',
        left: 0
    },
    activeContainer: {
        backgroundColor: 'rgba(221,226,255, 0.08)'
    },
    activeTitle: {
        color: '#DDE2FF'
    },
    container: {
        height: 56,
        cursor: 'pointer',
        ':hover': {
            backgroundColor: 'rgba(221,226,255, 0.08)'
        },
        paddingLeft: 32,
        paddingRight: 32
    },
    title: {
        fontFamily: 'Muli',
        fontSize: 16,
        lineHeight: '20px',
        letterSpacing: '0.2px',
        color: '#A4A6B3',
        marginLeft: 24
    }
});

function MenuItemComponent(props) {
    const { active, icon, title, ...otherProps } = props;
    const Icon = icon;
    return (
        <Row className={css(styles.container, active && styles.activeContainer)} vertical="center" {...otherProps}>
            {active && <div className={css(styles.activeBar)}></div>}
            <Icon fill={active && "#DDE2FF"} opacity={!active && "0.4"} />
            <span className={css(styles.title, active && styles.activeTitle)}>{title}</span>
        </Row>
    );
}

MenuItemComponent.propTypes = {
    active: bool,
    icon: func,
    title: string
};

export default MenuItemComponent;

Answer 1

显示输出 console.log(MenuItemComponent)

如果不是未定义则替换

<Row className={css(styles.container, active && styles.activeContainer)} vertical="center" {...otherProps}>
        {active && <div className={css(styles.activeBar)}></div>}
        <Icon fill={active && "#DDE2FF"} opacity={!active && "0.4"} />
        <span className={css(styles.title, active && styles.activeTitle)}>{title}</span>
    </Row>

在

<div>Text</div>

然后再次构建项目

Answer 2

MenuItemComponent 看起来像吗

function MenuItemComponent(props) {
        const { active, icon, title, ...otherProps } = props;
        const Icon = icon;
        return (
            <div>Text</div>
        );
}