“this”在地图函数Reactjs中未定义
Posted
技术标签:
【中文标题】“this”在地图函数Reactjs中未定义【英文标题】:"this" is undefined inside map function Reactjs 【发布时间】:2015-07-20 20:17:06 【问题描述】:我正在使用 Reactjs,编写一个菜单组件。
"use strict";
var React = require("react");
var Menus = React.createClass(
item_url: function (item,categories,articles)
console.log('afdasfasfasdfasdf');
var url='XXX';
if (item.type == 1)
url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', slug: categories[item.categoryId].slug);
else if (item.type == 2)
url = item.articleId == null ? 'javascript:void(0)' : path('buex_portal_view_article', slug: articles[item.articleId].slug, id: item.articleId);
else
url = item.url;
return url;
,
render: function ()
// console.log(this.props.menus); // return correctly
var menuElements = this.props.menus.map(function (item1) // return fault : 'cannot read property 'props' of undefined '
return (
<div>
<li>
<a href=this.item_url(item1, this.props.categories, this.props.articles )>item1.name // the same fault above
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</a>
<div class="sub-menu">
<div>
item1._children.map(function (item2)
return (
<div>
<h4>
<a href=this.item_url(item2, this.props.categories, this.props.articles)> item2.name </a>
</h4>
<ul>
item2._children.map(function (item3)
return (
<div><li><a href=this.item_url(item3, this.props.categories, this.props.articles) > item3.name </a></li></div>
);
)
</ul>
</div>
);
)
</div>
</div>
</li>
</div>
);
);
return (
<div class="menu">
<ul class="nav nav-tabs nav-stacked">
menuElements
</ul>
</div>
);
);
每当我在 map 函数中使用 'this' 时,它是未定义的,但在外部没有问题。
错误:
“无法读取未定义的属性'props'”
谁能帮帮我! :((
【问题讨论】:
How to access the correct `this` / context inside a callback?的可能重复 【参考方案1】:Array.prototype.map()
采用第二个参数来设置映射函数中this
所指的内容,因此将this
作为第二个参数传递以保留当前上下文:
someList.map(function(item)
...
, this)
或者,您可以使用 ES6 arrow function 自动保留当前的 this
上下文:
someList.map((item) =>
...
)
【讨论】:
一旦传递了 this 的第二个参数,是否意味着 this 引用了全局对象,如果是,为什么会这样? 嗯,由于某种原因,即使在 TypeScript 中使用箭头函数,我也没有看到this
被绑定。
我的行为和 Lucas 一样,都是使用 react。不过,老式的函数语法对我有用。多么奇怪。以上是关于“this”在地图函数Reactjs中未定义的主要内容,如果未能解决你的问题,请参考以下文章
TypeError:超级表达式必须为空或函数,在 ReactJS 中未定义 [重复]