ES6에서 중괄호가있는 예기치 않은 토큰이 있습니까?

Question

나는 나의 react.js 구성 요소의 "이미지 URL을 얻을"기능을 만들기 위해 노력하고 있지만, 어떤 이유로이 함수의 중괄호가 필요 예기치 않은 토큰이 있음을 말해 유지 :

// Loading.js 
import React, { Component } from 'react' 

export default class Header extends Component { 

render() { 
    const data = this.props.data 
    const header_data = data.globals.header 

    getImageURL(data) { 
     if(header_data) { 
     var logo_image_url = _.findWhere(metafields, { key: 'logo-image' }).url; 
     } else { 
     return null; 
     } 
    } 

    const logo_image_url = data.globals.header.logo_image.url; 

     return (
     <div id="siteHeader"> 
      <img className='logo' width="300" src="{logo_image_url}"/> 
      <span>The Heading!</span> 
     </div> 
    ); 
    } 
} 

    export default Header; 


This is the error I get: 

Unexpected token (9:20) 
    7 | const data = this.props.data 
    8 | const header_data = data.globals.header 
> 9 | getImageURL(data) { 
    |     ^
    10 |  if(header_data) { 

가 여분의 중괄호가 없습니다. 무엇이 문제입니까?

Answer 1

이 구문은 클래스 메서드를 선언 할 때만 유효합니다.

대신

1º

function getImageURL(data) { 
     if(header_data) { 
     var logo_image_url = _.findWhere(metafields, { key: 'logo-image' }).url; 
     } else { 
     return null; 
     } 
} 

2 º

const getImageURL = function(data){ 
    if(header_data) { 
     var logo_image_url = _.findWhere(metafields, { key: 'logo-image' }).url; 
     } else { 
     return null; 
     } 
} 

3 °

const getImageURL = (data) => { 
    if(header_data) { 
     var logo_image_url = _.findWhere(metafields, { key: 'logo-image' }).url; 
     } else { 
     return null; 
     } 
} 

를 사용하거나 렌더링 방법을 외부로 선언 할 수 있습니다.

class Header extends React.Component { 
    getImageURL(data){ 
     if(header_data) { 
      var logo_image_url = _.findWhere(metafields, { key: 'logo-image' }).url; 
     } else { 
      return null; 
     } 
    } 
    render(){...} 
} 

jsfiddle