使用来自变量的组件时出现警告

Question

我正在使用http://www.material-ui.com/#/components/app-bar的AppBar，并且遇到了一些问题。

我的代码如下所示：

const Menuright = (props) => (
    <IconMenu
        {...props}
        iconButtonElement={
            <IconButton><MoreVertIcon /></IconButton>
        }
        targetOrigin={{horizontal: 'right', vertical: 'top'}}
        anchorOrigin={{horizontal: 'right', vertical: 'top'}}
    >
        <MenuItem primaryText="Edit Profile" />
        <MenuItem primaryText="Upload Sample" />
        <MenuItem primaryText="Help" />
        <MenuItem primaryText="Sign out" />
    </IconMenu>
);

Menuright.muiName = 'IconMenu';

function coloredHeader(type, props=null) {
    const className = "App-header App-header-" + type;
    const styles = {};
    switch (type) {
        case 'main':
            styles['backgroundColor'] = notLoggedInColor;
            break;
        case 'artist':
            styles['backgroundColor'] = artistColor;
            break;
        case 'organizer':
            styles['backgroundColor'] = organizerColor;
            break;
        default:
            styles['backgroundColor'] = notLoggedInColor;
    }
    const titlestyle = {
        cursor: 'pointer'
    };

    return <AppBar className={className}
                   title="Legato"
                   style={styles}
                   onTitleTouchTap={ontaptitle}
                   titleStyle={titlestyle}
                   iconElementRight={Auth.isUserAuthenticated() ? <Menuright/>: null}>
    </AppBar>;
}

它与提供的samplecode非常接近。这通常是有效的，但会给我一些警告：

index.js:2177 Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in.

Check your code at CommonStyle.js:75.

我收到这个警告三次了。

导致警告的行是

iconElementRight={Auth.isUserAuthenticated() ? <Menuright/>: null}>

如果不使用Menuright变量，而是内联IconMenu代码，则不会产生警告。

谁能向我解释为什么会出现这种警告，以及如何解决它？

Answer 1

使用IconMenu而不是Menuright是什么意思？

无论如何，该错误消息很可能是该组件试图在内部执行以下操作：

const Component = props.iconElementRight

return <Component />

而且Component不是构建该组件的函数，而是该组件的一个实例，因为您传递的是<Menuright/>而不仅仅是Menuright。如下所示：

iconElementRight={Auth.isUserAuthenticated() ? Menuright : null}>