bootstrap list group onclick不能通过reactjs创建

时间:2018-03-05 15:39:02

标签: twitter-bootstrap reactjs

无法阅读财产' map'未定义为什么它不起作用

https://github.com/ankitsingh101/wp-customizer-api/blob/master/index.html

class Sidetabs extends React.Component {
    constructor(props){
    super(props);
    this.props={
       Data: [
        {
            title:"Globel",
            class:"globe"
        },
       {
           title:"Sections",
           class:"archive"
        },
       {
           title:"Settings",
           class:"cogs"
        },
        {
           title:"Panel",
           class:"columns"
        },
       {
           title:"Control",
           class:"columns"
        },
   ]
}
this.props.Data.map((item, index) => (console.log(item.title)));
}
render() {
  return(
    <div className="list-group">
    {
            this.props.Data.map((item, index) => (
                <a href="#" className="list-group-item text-center" style={{display: item.title==="Panel" ? 'none' : '' }} id={item.title==="Panel"? 'panel-list':''}>
                    <div><h4 className={"fa fa-" + item.class} aria-hidden="true"></h4><br/>{item.title}</div>
                </a>
            ))

    }
    </div>
  );
}

}   ReactDOM.render(,document.getElementsByClassName(&#39; bhoechie-tab-menu&#39;)[0]);

1 个答案:

答案 0 :(得分:1)

你不应该自己写东西给道具,this.props是组件从其父级发送的属性。删除

this.props={Data:...}

并替换为

this.state = {Data:...}

然后使用

this.state.Data.map((item, index) => (...)