在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