陣營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} /> 
});