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>;
}

非常接近提供的样本代码。这通常有效，但给了我一些警告：

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}>

使用变量中的组件时发出警告

1 个答案: