변수의 구성 요소를 사용할 때 경고

을 http://www.material-ui.com/#/components/app-bar에서 사용 중이며 문제가 발생했습니다.변수의 구성 요소를 사용할 때 경고

내 코드는 다음과 같습니다 제공된에 SampleCode 매우 가까운

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.

나는이 경고를 세 번을 얻는다. IconMenu 코드를 인라인 대신 Menuright 변수를 사용하지만하지 않는 경우

경고를 일으키는 라인

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

, 그것은 경고를 생성하지 않습니다.

아무도 내게이 경고가 발생하는 이유와 해결 방법을 설명 할 수 있습니까?

출처

2017-11-29 Jakob Abfalter

문제는 구성 요소를 가져 오거나 내보내는 방식과 관련이 있습니다. 어떻게 그 일을하고 있는지 게시 할 수 있습니까? 게다가, coloredHeader는 컴포넌트로 간주됩니까? 그렇다면 첫 번째 매개 변수가 소품이 아닌 이유는 무엇입니까? – nbkhope

'coloredHeader' 컴포넌트를 렌더링하는 방법을 공유하십시오. –

이름이 지정된 내보내기를 사용하고 있습니까? – randomguy04

Menuright 대신 IconMenu을 사용하면 무엇을 의미합니까?

어쨌든,이 오류 메시지는 구성 요소가 같은 것을 할 안쪽에 시도 가능성이 높습니다 :

const Component = props.iconElementRight 

return <Component />

그리고 대신 해당 구성 요소를 구축하는 기능되는 Component를 해당 구성 요소의 인스턴스가 이미, 단지 Menuright 대신 <Menuright/>을 전달했기 때문입니다. 예 :

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

출처

2017-11-29 22:42:46 cfraser

변수의 구성 요소를 사용할 때 경고

답변

관련 문제