h5 属性 data-xxx，react自定义属性

今天才到一个坑，主要是想给一个组件增加一个属性，开始名字随便取，但是发现在， 也获取不到，最后才发现，新的标注一点要以data-xxx开始。

另外写一个例子，关于react 自定义组件，并且获取属性的demo

export class Modes extends React.Component {  
  constructor(props) {      
   super(props);     
   this.items =
   [ {id:1, isOn:this.props.codeLight, name:"冷光"},   
     {id:2, isOn:this.props.warmLight, name:"暖光"},    
     {id:3, isOn:this.props.intelligent, name:"智能"}];  
  }    

touchStart(event){      
   // 这里必须是currentTarget    
  // 并且属性的命名一定是 data-index    
   var index = event.currentTarget.getAttribute('data-index');  
   console.log(" event " + event  + index);   
   Actions.lightModeAction(index);  
  }   

 render() {  
      //noinspection JSAnnotator   
   this.items[0].isOn = this.props.codeLight ;  
   this.items[1].isOn = this.props.warmLight ;   
   this.items[2].isOn = this.props.intelligent ;  
 
   return (
<section className="mode flex" > 
{
  this.items.map(((o) => {      
      var status = o.isOn?'on':'off';     
       return (
            <dl className="flex-cell" key={o.id}  data-index={o.id} onTouchStart={this.touchStart}   >      
              <dd>
                    <img src{"../static/img/pic_modebutton_"+o.id+"_"+status+".png"}/></dd>            
                    <dt className={status} >{o.name}</dt>   
             </dl>);       
 }).bind(this))}   
 </section>);  
}};