Неожиданный маркер, как ожидается, в React компонент

Question

У меня есть Реагировать компонент, который выглядит следующим образом

'use strict'; 

import 'babel-polyfill'; 
import React from 'react'; 
import TreeNode from './TreeView'; 

export default React.createClass({ 

    mapFromApi : function(data) { 
    const rec = (tree) => tree.reduce((x,y) => { 

     const newObj = { 
     "id" : y["@id"], 
     "name" : y["rdfs:label"] 
     }; 

     if (y.hasOwnProperty("options")) { 
     newObj.children = rec(y.options, []); 
     } 
     if (y.hasOwnProperty("children")) { 
     newObj.children = rec(y.children, []); 
     } 

     x.push(newObj); 
     return x; 
    }, []); 

    let t = rec(data); 

    return t; 

    }, 
    render: function (data) { 
    let tree1 = this.mapFromApi(this.props.data.properties).map(child => { 
     return <TreeNode key={child['id']} data={child}/>; 
    }.bind(this)); 

    return (
     <div className='vocab'> 
     <h4>vocab1</h4> 
     <div className='accordion'> 
      {tree1} 
     </div> 
     </div> 
    ); 
    } 
}); 

Когда я запускаю это я получаю сообщение об ошибке на связывания ключевого слова

SyntaxError: App.jsx: Unexpected token, expected , (56:5) 
    54 |  let tree1 = this.mapFromApi(this.props.data.properties).map(child => { 
    55 |   return <TreeNode key={child['id']} data={child}/>; 
> 56 |  }.bind(this)); 
    | ^
    57 | 
    58 |  return (
    59 |  <div className='vocab'> 

Я не конечно, если это связано с моей настройкой Babel, и я очень смущен всей ситуацией версии es.

Может ли кто-нибудь помочь мне разрешить это? Большое спасибо.

Answer 1

Если вы упростите способ написания этого кода, эти синтаксические ошибки должны быть легче идентифицировать.

let { data } = this.props; 

this 
    .mapFromApi(data.properties) 
    .map(child => <TreeNode key={child.id} data={child} />) 

Функция стрелка уже собирается .bind(this) для вас, так что вы можете просто пропустить это.

Answer 2

Вы не должны использовать .bind (это), потому что вы используете arrow функцию ES6 => и что будет ссылаться на правильный this

Я хотел бы написать некоторые вещи, как это

const {data} = this.props; 

let tree1 = this.mapFromApi(data.properties).map(child => { 
    return <TreeNode key={child['id']} data={child}/>; 
});