阵营this.props是一个空对象

Question

我有一个包含基于阵列

render: function() { 
    var navItems = ['X', "Y", 'Z'] 
    var self = this; 
    var NAV_ITEMS = navItems.map(function(item, i){ 
     return <li item={item} key={i} onMouseOver={self.handleMouseEnter}> {item}{i} </li> 
    }); 
    return(<div> {NAV_ITEMS} </div>) 
} 

上的列表中在该点的成分，不应该这些元素具有支柱等效于通过信通过数组？下一部分，mouseEnter我想console.log(this.props)，但它显示为一个空对象。

这里是我的handleMouseEnter功能：

handleMouseEnter: function(){ 
    console.log("Mouse Over!" this.props) 
}, 

=> {} 

Answer 1

你应该通过道具来反应的组分而不是HTML元素。如果你是返回一个呈现为列表组件的反应组件，你可以访问该道具。

正如你可以在属性绑定到一个函数

onMouseOver={self.handleMouseEnter.bind(this, item} 

或者创建一个像

var NavItem = React.createClass({ 
    handleMouseEnter: function(){ 
     //You will see item here 
     console.log("Mouse Over!" this.props) 
    }, 
    render(): function(){ 
     return <li onMouseOver={self.handleMouseEnter}> {item}{i} </li> 
    } 
} 

而在你的循环中的反应组件去

var items = navItems.map(function(item, i){ 
    return <NavItem item={this.props.item} key={i} /> 
});