Javascript React-将继承的道具映射到HTML元素

我认为这段代码是不言自明的。我想将

this.props.tabAttr

（一个对象数组）映射到HTML元素上

import React from 'react';
var Tab = React.createClass ({

        propTypes : {
            tabAttr : React.PropTypes.array.isRequired
        },

        render : function () {
            return (
                {this.props.tabAttr.map (function (ob) {
                    return (
                        <div class = {ob.tabClassName}>
                            <span> {ob.tabName} </span>
                        </div>
                    )}
                )}
            );
        }
    });

    export default Tab;

从“React”导入React；
var Tab=React.createClass({
道具类型：{
tabAttr:React.PropTypes.array.isRequired
},
渲染：函数（）{
返回(
{this.props.tabAttr.map（函数（ob））{
返回(
{ob.tabName}
)}
)}
);
}
});
导出默认选项卡；

网页包在

{this.props.tabAttr.map（函数（ob）{…

---

：模块生成失败，意外的令牌…

在“对集合

class

进行反应”属性中，您应该使用

className

而不是

class

，更改此选项

 <div class = {ob.tabClassName}>

到

组件必须只有一个根元素

render: function () {
  var tabs = this.props.tabAttr.map (function (ob, index) {
    return <div key={index} className={ob.tabClassName}>
      <span> {ob.tabName} </span>
    </div>
  });

  // Component has only one root element
  return <div>
    { tabs }
  </div>;
}

render:function（）{
var tabs=this.props.tabAttr.map（函数（ob，索引）{
返回
{ob.tabName}
});
//组件只有一个根元素
返回
{tabs}
;
}

render: function () {
  var tabs = this.props.tabAttr.map (function (ob, index) {
    return <div key={index} className={ob.tabClassName}>
      <span> {ob.tabName} </span>
    </div>
  });

  // Component has only one root element
  return <div>
    { tabs }
  </div>;
}