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元素。如果您正在返回一个呈现为列表组件的react组件，则可以访问prop。

您可以将属性绑定到具有

的函数

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

反应this.props是一个空对象

1 个答案: