console.log를 제거하면 오류가 발생합니다

Question

나는 reactjs 및 react-mdl을 사용하여 빌드 된 앱을 보유하고 있습니다. 탭 쇼 정보, 에피소드 및 캐스트가 있습니다. 에피소드를 클릭하면 John의 Jane이 다른 텍스트로 변경되어야하므로 55 ​​개의 에피소드와 탭 아래에있는 다른 콘텐츠가 변경됩니다. 내가 코딩 한 코드는 내가 원한대로 작동하지만 올바른 방법이 아니며 버그가 있다고 생각한다. 나는 내 잘못을 알고 있지만 어떻게 해결할 수 있는지 모른다.

class MovieDetailView extends Component{ 
    constructor(props){ 
    super(props); 
    this.state = { 
     movie:[ ], 
     activeTab:1 
    } 
    } 

    render(){ 
    console.log("Tab ID: ", this.state.activeTab); 
    let movie = this.state.movie; 
    const mainCastJoin = _.join(movie.mainCast, ', '); 
    if(!this.state.movie){ 
     return(
     <p>Loading</p> 
    ); 
    } 

    else{ 
     return(
     <div className="demo-big-content"> 
      <Layout fixedHeader fixedTabs> 
       <Header> 
       {this.state.activeTab >= 0 ? <HeaderComponent movie={this.state.movie} activeTab={this.state.activeTab}/> : ' '} 
        <HeaderTabs ripple activeTab={this.state.activeTab} onChange={(tabId) => this.setState({ activeTab: tabId })}> 
         <Tab>SHOW INFO</Tab> 
         <Tab>EPISODES</Tab> 
         <Tab>CAST</Tab> 
        </HeaderTabs> 
        <Link to="/"><i className="material-icons arrow_back">arrow_back</i></Link> 
       </Header> 
       <Content> 
        <div className="page-content">{this.state.activeTab >=0 ? <MovieInfo movie={this.state.movie} activeTab={this.state.activeTab} /> : ''}</div> 
       </Content> 
      </Layout> 
      </div> 
    ); 
    } 
    } 
} 

export default MovieDetailView; 

HeaderComponent.js

const HeaderComponent = ({activeTab, movie}) => { 
    const mainCastJoin = _.join(movie.mainCast, ', '); 
    const renderHeader = 
    console.log('kk'); 
    if(activeTab === 0){ 
     return(
     <div> 
      <HeaderRow title={movie.title}> 
      <IconButton name="more_vert" id="demo-menu-lower-left" /> 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">date_range</i>&nbsp;{mainCastJoin} 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 - 
      </HeaderRow> 
     </div> 
    ); 
    } 

    if(activeTab === 1){ 
     return(
     <div> 
      <HeaderRow title={movie.title}> 
      <IconButton name="more_vert" id="demo-menu-lower-left" /> 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">date_range</i>&nbsp;episode 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 - 
      </HeaderRow> 
     </div> 
    ) 
    } 

    if(activeTab === 2){ 
     return(
     <div> 
      <HeaderRow title={movie.title}> 
      <IconButton name="more_vert" id="demo-menu-lower-left" /> 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">date_range</i>&nbsp;main cast 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 - 
      </HeaderRow> 
     </div> 
    ) 
    } 

    return(
    <div>{renderHeader}</div> 
) 
} 

export default HeaderComponent; 

이 코드가 작동하지만 난 다음을 console.log를 제거하면 내가

Error in ./src/component/HeaderComponent.js 
Syntax error: Unexpected token (10:4) 

     const renderHeader = 
     // console.log('kk'); 
     if(activeTab === 0){ 
     ^
     return(
      <div> 
      <HeaderRow title={movie.title}> 

내가이 문제를 어떻게 해결할 수있는 오류가? 왜 오류가 발생합니까? 그런 문제를 해결하는 효율적인 방법은 무엇입니까?

UPDATE

let renderHeader = () => ({ 
    return(
    if(activeTab === 0){ 
     return(
     <div> 
      <HeaderRow title={movie.title}> 
      <IconButton name="more_vert" id="demo-menu-lower-left" /> 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">date_range</i>&nbsp;{mainCastJoin} 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 - 
      </HeaderRow> 
     </div> 
    ); 
    } 

    if(activeTab === 1){ 
     return(
     <div> 
      <HeaderRow title={movie.title}> 
      <IconButton name="more_vert" id="demo-menu-lower-left" /> 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">date_range</i>&nbsp;episode 
      </HeaderRow> 
      <HeaderRow> 
      <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 - 
      </HeaderRow> 
     </div> 
    ) 
    }) 
} 

출력을 생성하지 않고, 상기 코드를 정류. 그것은 오히려주는 새로운 오류 {this.renderHeader()}

const renderHeader = () => ({ 
    if(activeTab === 0){ 
    ^
       return(
       <div> 
       <HeaderRow title={movie.title}> 

Answer 1

당신은 (이 경우 또는 상수) 변수에 할당 할 수있는 할당 연산자 (=) 이후에 뭔가를해야합니다.

작업 코드에서 반환 값은 console.log()입니다.

깨진 코드에서 if 문을 입력하려고 시도했습니다.

Answer 2

renderHeader에 값을 지정하지 않았습니다! 콘솔에서 주석 처리되지 않은 beacuse와 함께 작업하면 console.log의 결과가 지정됩니다.

Answer 3

const renderHeader =를 console.log()로 설정 중입니다. 허용되는 것 (유용하지는 않지만 허용됨).

하지만 제거하면 const 문에 "const renderHeader ="가 설정됩니다. 파서는 구문 분석 할 수 없으며 JavaScript가 손상됩니다. 당신이 할 수있는, 또는

var renderHeader=(function(){ 
if(sth){ 
return "value"; 
} 
return "standard"; 
})(); 

: 당신이 변수가 경우의 결과를 포함시킬 경우

Answer 4

, 당신은 인생 (immediatly 호출 함수 표현식)로 포장해야

var renderHeader=" null"; 
if(sth){ 
renderHeader="sth is true"; 
} 

Answer 5

전문가가 이미 좋은 설명과 함께 코드의 오류 원인을 언급했습니다. 이제 당신은 내 해결책으로 극복 할 수있는 또 다른 어려움에 처해 있습니다. 그러나 나는 또한 학습자입니다. 저는이 전문가들로부터 배우기 위해이 솔루션을 나눠 쓰고 있습니다. 내가이 문제를 해결한다면, 내 솔루션은 이러한 문제를 처리 여부의 좋은 방법 인 경우

const ShowInfoHeader = (movie, mainCastJoin) => { 
    return(
    <div> 
     <HeaderRow title={movie.title}> 
     <IconButton name="more_vert" id="demo-menu-lower-left" /> 
     </HeaderRow> 
     <HeaderRow> 
     <i className="material-icons">date_range</i>&nbsp;{mainCastJoin} 
     </HeaderRow> 
     <HeaderRow> 
     <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 - 
     </HeaderRow> 
    </div> 
); 
} 

const EpisodeHeader = (movie) => { 
    return(
    <div> 
     <HeaderRow title={movie.title}> 
     <IconButton name="more_vert" id="demo-menu-lower-left" /> 
     </HeaderRow> 
     <HeaderRow> 
     <i className="material-icons">date_range</i>&nbsp;episode 
     </HeaderRow> 
     <HeaderRow> 
     <i className="material-icons">history</i>&nbsp;55 episodes/ 4 seasons/ 2013 - 
     </HeaderRow> 
    </div> 
); 
} 


const HeaderComponent = ({activeTab, movie}) => { 
    const mainCastJoin = _.join(movie.mainCast, ', '); 

    if(activeTab===0){ 
    return(
    <div>{ShowInfoHeader(movie, mainCastJoin)}</div> 
) 
} 
if(activeTab===1){ 
    return(
    <div>{EpisodeHeader(movie)}</div> 
) 
} 
} 

export default HeaderComponent; 

내가이 솔루션에 대한 전문가의 생각을 부탁드립니다 것입니다.