Javascript React组件中应有意外标记

我有一个反应组件，看起来像这样

'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>
    );
  }
});

const {data} = this.props;

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

“严格使用”；
进口“babel polyfill”；
从“React”导入React；
从“/TreeView”导入TreeNode；
导出默认的React.createClass({
mapFromApi:函数（数据）{
const rec=（tree）=>tree.reduce（（x，y）=>{
常数newObj={
“id”：y[“@id”]，
“名称”：y[“rdfs:标签”]
};
如果（y.hasOwnProperty（“期权”））{
newObj.children=rec（y.options，[]）；
}
如果（y.hasOwnProperty（“子女”））{
newObj.children=rec（y.children，[]）；
}
x、 推（newObj）；
返回x；
}, []);
设t=rec（数据）；
返回t；
},
渲染：函数（数据）{
让tree1=this.mapFromApi（this.props.data.properties）.map（child=>{
返回；
}.约束（这个）；
返回(
声音1
{tree1}
);
}
});

运行此命令时，bind关键字出现错误

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'>

SyntaxError:App.jsx:意外标记，应为（56:5）
54 |让tree1=this.mapFromApi（this.props.data.properties）.map（child=>{
55 |返回；
>绑定（这个）；
|      ^
57 |
58 |返回(
59 |       

我不确定这是否与我的Babel设置有关，我对整个es版本的情况非常困惑

---

有人能帮我解决这个问题吗？非常感谢。

您不需要使用。绑定（此），因为您正在使用ES6

箭头

函数

=>
，这将引用正确的
此

我会写这样的东西

'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>
    );
  }
});

const {data} = this.props;

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

const{data}=this.props；
让tree1=this.mapFromApi（data.properties）.map（child=>{
返回；
});
如果简化代码的布局方式，这些语法错误应该更容易识别

let { data } = this.props;

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

let{data}=this.props；
这
.mapFromApi（data.properties）
.map（子项=>）

arrow函数已经将为您绑定（此）
，因此您可以忽略它。
谢谢我在阅读您关于此问题的文章后意识到了这一点。也谢谢您。在阅读Dan的文章后，我对bind有了更多的了解。这就是我的代码现在的样子。由于arrow函数，我不必绑定。