Question

我正在尝试创建一个＆＃34;获取图片网址＆＃34;我的react.js组件中的函数，但由于某种原因，它一直告诉我，当函数的大括号是必要的时候有一个意外的标记：

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

或者你可以在render方法之外声明它。

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

ES6中带有花括号的意外标记？

1 个答案: