Javascript 反应此。道具为空对象

我有一个包含基于数组的列表的组件

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

---

您应该向react组件传递道具，而不是html元素。如果您返回的是作为列表组件呈现的react组件，则可以访问该属性

可以按原样将属性绑定到具有

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

或者创建一个react组件，如

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 NavItem=React.createClass({
HandleMouseCenter:function（）{
//您将在此处看到项目
console.log（“鼠标悬停！”这个.props）
},
render（）：函数（）{
return
{item}{i}
}
}

在你的循环中

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

var items=navItems.map（函数（项，i）{
返回
});

实际上，如果我没有引用数组中的索引，则项是未定义的。因此，在NavItem组件中，{item}是未定义的。让该部分成为“{this.props.item}”而不是{item}是非常关键的.Yeah edited。抱歉，在您的解释中，听起来您好像已经知道它必须从这个.props访问props。代码中重要的不是您是否缺少这个.props，而是您正在将react props传递给html元素。

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