Question

我认为代码非常自我解释。我想将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;

Webpack在{this.props.tabAttr.map (function (ob) {...报告错误：模块构建失败，意外令牌......

Answer 1

在设置class属性的React中，您应该使用className代替class，请更改此

 <div class = {ob.tabClassName}>

到

 <div className={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>;
}

Example

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

1 个答案: