为什么绑定道具不起作用，而使用箭头函数起作用？
绑定道具不起作用，而使用箭头函数起作用的原因是因为箭头函数具有词法作用域绑定，而不是动态作用域绑定。
在JavaScript中，函数的作用域是由函数被定义时的位置决定的，而不是函数被调用时的位置。当使用箭头函数时，它会继承父级作用域的上下文，而不是创建一个新的作用域。这意味着箭头函数内部的this关键字会指向定义箭头函数的上下文，而不是调用箭头函数的上下文。
相比之下，使用普通函数时，函数内部的this关键字会根据函数的调用方式动态绑定。如果函数被作为对象的方法调用，this将指向该对象；如果函数被独立调用，this将指向全局对象（在浏览器中是window对象）；如果函数使用apply()或call()方法调用，this将根据传入的参数进行绑定。
因此，当绑定道具不起作用时，可能是因为绑定的函数使用了普通函数而不是箭头函数，导致this关键字的绑定出现问题。而使用箭头函数时，由于它的词法作用域绑定特性，可以确保this关键字指向正确的上下文，从而起到预期的作用。
需要注意的是，箭头函数也有一些限制，例如不能作为构造函数使用，不能使用arguments对象等。因此，在选择使用箭头函数还是普通函数时，需要根据具体的需求和场景进行权衡和选择。
腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- 云开发（CloudBase）：https://cloud.tencent.com/product/tcb
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云数据库（CDB）：https://cloud.tencent.com/product/cdb
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 区块链（BCS）：https://cloud.tencent.com/product/bcs
- 音视频处理（VOD）：https://cloud.tencent.com/product/vod
- 网络安全（SSL）：https://cloud.tencent.com/product/ssl
相关·内容
1回答
我刚刚学习了箭头函数，以及当您开始在上使用子函数时，它们如何帮助提高可见性。
对于" if“语句，我不确定这是否不同，但我根本无法让它起作用。这一问题：
myFunction() {
console.log('Welcome Flag: ' + this.props.welcomeFlag);
if (this.props.welcomeFlag == false) {
this.props.dispatch(setWelcomeFlag(true));
showMessage('Welcome back,
浏览 0提问于2018-05-07得票数 0
回答已采纳
1回答
我是个新手，正在尝试从Coursera完成我的第一个作业。有一个名为菜肴的对象数组，每个菜都有一个名为comments的对象数组。我写了我的第一个函数，它只是简单地渲染菜肴，并显示菜肴的图像、名称和简短描述。当我试图渲染与每个对象相关的注释时，我得到了错误。这里的人，问了同样的问题，我实现了给出的答案，但它不起作用。下面是我的代码：
import React, { Component } from 'react';
import { Card, CardImg, CardImgOverlay, CardText, CardBody, CardTitle } from '
浏览 22提问于2020-05-05得票数 0
当ı单击a标签时，mysort函数不起作用，为什么不起作用？
类导航栏扩展了组件{
mysort=(e)=>{
e.preventDefault()
var ks= e.sort(function(a,b){
return a-b;
});
console.log(ks)
}
render(){
var dizi=[4,2,56,42,23,15]
return(
浏览 0提问于2020-04-01得票数 0
作品
Template.Hello.onRendered(function() {
this.autorun(() => {
console.log('sup');
});
});
不起作用。
Template.Hello.onRendered(() => {
this.autorun(() => {
console.log('sup');
});
});
错误是TypeError：_this.autorun不是函数。
任何想法，为什么使用箭头符号给我们这个错误？
浏览 2提问于2016-01-25得票数 4
回答已采纳
1回答
我有以下代码： https://codesandbox.io/s/react-datepicerhook-u2vv1 如您所见，有一个工作日期选择器和一个非工作日期选择器。这两个日期选择器非常相似，所以我想创建一个新组件，它只接受参数作为名称。然而，在我反规范化的状态下，我的状态出现了一些问题。有什么建议为什么和如何解决这个问题吗？
浏览 5提问于2020-04-02得票数 2
回答已采纳
我有两个div的简单页面。第二个div的背景色取决于活动属性的状态。如果active为true，则应该使用CSS文件中的.active类，否则使用.two样式。
我为这个场景编写了单元测试，以检查第二个div的样式是否在状态更改后发生了更改。
我意识到一件事，当我执行style()函数以获得正确的样式名称时，单元测试不起作用，而我在第二个div上的样式也没有更新。但是，当我以箭头函数的形式执行样式时，一切都可以工作。你们知道为什么会发生这种事吗？正常的函数调用有什么问题？为什么不调用呢？
箭头函数控制台输出(预期)
console.log src/containers/Example/Exam
浏览 0提问于2018-11-19得票数 0
回答已采纳
我想问，为什么$(这个)在我的变更函数中不起作用？
如果单击复选框，我的目标是隐藏输入。
$('#checkboxContactName').on('change', () => {
if ($(this).prop('checked')) {
console.log('is checked!');
$(this).parent().next().css('display', 'none');
} else {
$(this).parent().next()
浏览 5提问于2017-10-12得票数 0
回答已采纳
这个版本的es6函数不起作用：
Array.prototype.concatAll = () => {
let results = [];
this.forEach((subArray) => {
subArray.forEach((item) => {
results.push(item);
});
});
return results;
};
当我像这样使用它时：
var stocks = exchanges.concatAll();
控制台上写着：Cannot read property 'forEach'
浏览 2提问于2015-11-28得票数 0
回答已采纳
我在javascript类中有两个函数，我试图从另一个内部调用其中一个函数，但它不起作用。为什么会这样呢？
class Grid {
paintGrid() {
$("td").on("click", function() {
var color = $("#colorPicker").val();
$(this).css( "background-color", color);
})
}
makeGrid() {
$("#sizePicker"
浏览 0提问于2018-06-28得票数 0
回答已采纳
11回答
我已经用ES6做了一段时间的实验，我只是遇到了一个小问题。 我真的很喜欢使用箭头函数，只要有可能，我就会使用它们。 但是，看起来你不能绑定它们！ 下面是函数： var f = () => console.log(this); 下面是我想要将函数绑定到的对象： var o = {'a': 42}; 下面是我将如何绑定 至 var fBound = f.bind(o); 然后我就可以打电话给 fBound(); 它将输出以下内容( 对象)： {'a': 42} 酷！可爱！除了它不起作用。而不是输出 对象时，它会输出 对象。 所以我想知道:你能绑定箭头函数吗？
浏览 121提问于2015-10-24得票数 165
回答已采纳
2回答
我在vue中的两个组件之间共享信息。此时，我可以使用箭头函数获得所创建的钩子的值，但是，对于我声明的其他属性，我无法对此值进行转换。我读到箭头函数在创建的钩子中不起作用，我想知道如何替换这个箭头函数并得到我需要的值。
data() {
return{
userloged:'',
}
},
created(){
serverBus.$on('validation', (user) =>{
this.userloged = user
浏览 0提问于2018-05-10得票数 4
我是节点模块的新手。我试过了
module.exports = function (firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.fullName = function () {
return this.firstName + ' ' + this.lastName;
}
}
然后
让person1 =新的人(‘Rajesh’，'Dhoundiyal')
这个很管用。但是，当我尝试在module.
浏览 4提问于2017-10-12得票数 0
1回答
我试图从一个不同的范围内调用一个super方法，但这似乎不起作用。
'use strict';
class One {
test() {
console.log('test');
}
}
class Two extends One {
hi() {
super.test();
}
hello() {
var msg = 'test';
return new Promise(function(resolve, reject) {
浏览 0提问于2015-09-22得票数 2
回答已采纳
2回答
我这里有个高阶函数。
虽然这项工作如预期的那样：
var square = (a) => a * a;
var callAndLog = (func) => {
return function () {
var res = func.apply(undefined, arguments);
console.log("Result is: " + res);
return res;
}
};
var squareAndLog = callAndLog(square);
squareAndLog(5); // Result is
浏览 0提问于2017-04-03得票数 3
回答已采纳
1回答
我还在为箭头的功能而挣扎。我曾担任以下职位：
但是现在我对如何在geoQuery中使用它们有了一个新的问题。我尝试了如下代码：
myFunction = () => {
var onKeyMovedRegistration = () => geoQuery.on("key_moved", function(key, location, distance) {
console.log('Test log');
if (key != this.props.userID) {
浏览 0提问于2018-05-07得票数 0
回答已采纳
我使用vuejs和axios进行简单的ajax调用：
var app1 = new Vue({
el: '#app1',
data: {
test: []
},
methods: {
setAJAX: function () {
axios.get('/Departments/GetDepartments/').then(response => this.test = response.data.listBACAET);
}
}
});
为什么这样做是有效的：
setAJAX: functio
浏览 2提问于2019-11-25得票数 1
回答已采纳
这是我的子组件，需要将数据传递给它的父组件。
class Sidebar extends React.Component {
getUserInput(event){
event.preventDefault();
let value = document.getElementById('input-button').value;
console.log(value);
this.props.handleSubmit(value);
}
render() {
return (
<div>
浏览 3提问于2016-11-09得票数 0
回答已采纳
我在这里看到了许多关于这个问题的问题，但似乎没有一个与我遇到的问题相匹配，而且更加复杂。
我正在学习ReactJS和React Native。我正在阅读并遵循“学习React Native”一书中的代码示例：
由于某些原因，在调用handleTextChange函数时，在下面的代码中调用this.setState会导致"this.SetState不是一个函数“。错误。我的问题是为什么？与其他关于这个问题的问题不同，我不相信我对this.stateState的调用是隐藏在回调函数或if语句中的。为什么它是未定义的？
下面是我的代码：
class WeatherProject extend
浏览 2提问于2016-07-18得票数 32
2回答
显然，arguments.length不起作用。
我可以将签名更改为f: (...args) => { if (args.length>0) { ..}; };
但这将从函数声明中删除参数信息。
有更好的方法吗？
浏览 2提问于2016-09-11得票数 10
回答已采纳
我有一个应用了jQuery ui自动完成插件的jQuery文本区域。我注意到，即使没有显示自动补全建议，用箭头上下移动也不起作用。只有右边和左边。
有什么想法为什么和如何解决吗？这是一种选择吗？我理解当自动完成选项打开时，向上和向下被禁用，但如果它们没有打开，为什么要禁用？
谢谢
浏览 0提问于2011-11-02得票数 2
回答已采纳
1回答
如果我通过了从模块A到模块B的“测试”功能，为什么：
//A.js
import B from './B'
export default {
self: this,
test: ()=> {
console.log(self === this) // this should return true but doesn't because when B calls it, "this" is B
},
initA:function() {
B.initB(this.test); //
浏览 3提问于2015-07-31得票数 3
回答已采纳
在$scope和$mdDialog是静态的情况下，可以执行以下工作。
declare var module: any;
export interface IChangePassword extends ng.IScope {
cancel: Function;
myname: string;
state: string;
processRequest: Function;
CurrentPassword: string;
NewPassword: string;
ConfirmPassword: string;
}
export cla
浏览 1提问于2018-02-26得票数 2
回答已采纳
我正在用nativescript-vue制作一个简单的应用程序，在主页上我有一个启动扫描仪的按钮，这样我就可以扫描产品了。这是我的主页：
<template>
<Page class="page">
<StackLayout class="hello-world">
<Button @tap="scan" text="Scan a product"/>
</StackLayout>
</Page>
</template&
浏览 13提问于2018-08-20得票数 0
回答已采纳
1回答
我的项目中有一个功能组件，现在我需要实例化它，以便在JS中处理它。
我该怎么办？
我试过Vue.extend()，它不起作用。
我发现有人的密码是这样的：
function createInstance(FunctionalComponent, vnodeData) {
const instance = new Vue({
el: document.createElement('div'),
props: FunctionalComponent.props,
render(h) {
return h(
Functiona
浏览 8提问于2022-12-01得票数 1
在我的chrome扩展的内容脚本中，以下代码不起作用：
var myFunction = () => {
console.log("sending msg");
chrome.runtime.sendMessage({ action: "myAction" });
}
但是，当我将箭头函数转换为经典的JS函数时，它起了作用。
function myFunction() {
console.log("sending msg");
chrome.runtime.sendMessage({ action: "myActio
浏览 1提问于2021-02-11得票数 0
回答已采纳
我试图在网页中每秒钟之后显示正在更改的值，但{{}不起作用。但是，我使用了console.log，它确实显示了不断变化的值。
这是我的.ts代码片段
randomValue: number;
processIncrementValue(){
this.randomValue = Math.floor((Math.random()*100)+1);
console.log("generating random number: " + this.randomValue);
}
// on this function by button press, value starts
浏览 3提问于2021-05-08得票数 0
回答已采纳
4回答
我有一个通过onclick执行的脚本，但当我使用图像时，它不起作用，只有按钮起作用。你可以在上看到这个例子。单击“向左”按钮，然后单击向下按钮，它们都可以工作。但由于某些原因，右箭头不起作用。请帮帮忙。谢谢!
浏览 1提问于2013-02-14得票数 4
回答已采纳
2回答
G‘’day，我读了流星的所有ecmascript 6-而且觉得很棒.“我再也不用写‘函数’了”--这么快就把一堆函数换成了lambdas.结果发现它不起作用：
如果您在meteor中编写了一个助手函数--在" this“属性中传递数据上下文--当然，lambdas使用了一个词法--所以我非常简单地理解了这个问题。
问题是--对我来说并不明显的是解决方案--您知道如何使用需要当前数据上下文的() =>表示法来生成助手函数吗？除了“这个”，它似乎住在别的地方吗？
浏览 1提问于2015-11-18得票数 2
回答已采纳
注：，我重组了我的问题，以使它更容易理解。然而，为了历史的目的，我保留了旧的版本。
我有一个function应用程序，当我从箭头函数调用this.setState()时，我得到了“组件没有挂载的消息”。这是我的组成部分：
import React, { Component } from 'react'
class Test extends Component {
state = {
value: ''
}
onChange = (e) => {
e.preventDefault()
浏览 4提问于2017-06-19得票数 3
在我的应用程序中，我有一个根页面。在这个根页面中，我包含了Navbar component，我尝试从它访问名为currentRoute的变量。我的index.js，其中我定义了currentRoute
import Vue from 'vue';
import routes from './routes';
var app = new Vue({
el: '#app',
data: {
currentRoute: window.location.pathname,
},
computed: {
浏览 1提问于2017-05-01得票数 1
回答已采纳
请帮助我，当this.state.isX打印控制台的值始终为真时，我真的不明白。为什么setState在这种情况下不起作用。这是我的源代码？
class Square extends React.Component {
constructor(props) {
super(props);
this.state = {
value: null,
isX: true
};
}
handle(){
this.setState({value: 'X',isX:!this.state.isX});
console
浏览 0提问于2018-03-19得票数 0
回答已采纳
在使用react redux和映射状态支持连接()时，接收到的状态具有正确的值，但是当通过this.props访问变量时，“此”总是未定义的。
当按下侧边栏组件上的按钮(仅为测试目的)时，第二个控制台日志总是在TypeError中失败:无法读取console.log(this.props.visibility)上未定义的属性“props”。
我是否遗漏了一些额外的东西，以便允许通过mapStateToProps通过this.props访问新映射的值？或者，即使我应该以另一种方式访问它们，而不是this.props。
提前谢谢。
组件
import React, { Component } fr
浏览 0提问于2019-01-27得票数 2
回答已采纳
此代码在Firefox中有效，但在Chrome中不起作用。报警仅在Firefox中执行。为什么？我做错了什么？
jQuery(document).ready(function($){
$('#myselect option').on('click', function() {
var selectvalue= $(this).attr('value');
alert(selectvalue);
return false;
});
});
浏览 1提问于2013-07-16得票数 0
回答已采纳
2回答
这里我有这样的代码
h(e) {
console.log(e.target.value);
this.setState(state => {
return {editData: e.target.value};
});
}
但它不起作用。E- event - in setState函数变为null。有可能做这样的事情吗？
浏览 0提问于2019-07-27得票数 0
我想维护简单的应用程序与击倒和咖啡脚本。我想添加Json对象数组，如下所示：
[
{
Name = "",
Subscribe = "",
ScrollOfDish = [0]
},
{
Name = "",
Subscribe = "",
ScrollOfDish = [0]
}
]
下面是我的代码：
class Complex
constructor: ()->
浏览 0提问于2012-11-07得票数 2
2回答
为什么我在抓取json时得到了不同的反应？当我使用箭头函数时，它起作用，而不使用时，它不起作用。
constructor(props){
super(props);
this.state = {
data: [],
};
this.url = 'https://fcctop100.herokuapp.com/api/fccusers/top/recent';
}
使用箭头函数获取：
fetch(url)
.then((response) => {
return response.json()
}).then((json) =>
浏览 0提问于2017-06-13得票数 2
回答已采纳
2回答
React路由器结构化-传递函数
、、、、
我对reactjs非常陌生，只是想知道是否有什么简单的方法可以显示从相同组件到不同路由的信息。在下面的示例代码中，我只有两个函数，它们只是返回充满文本的div，调用它们并立即呈现它们(在类中或在路由器中)将使它们处于同一“页面”上。 我试过通过道具传递裁判，但他们总是以未定义而告终。我认为状态改变会很尴尬，因为没有真正的“事件”。我使用create-react-app、react-routerv4和react-bootstrap。 在App.js中 import React, { Component } from 'react';
import './App.css&
浏览 25提问于2019-01-20得票数 0
回答已采纳
3回答
我一直在试图弄清楚为什么我的容器不知道什么是“这”。
如果我将容器更改为一个组件，那么它将正常工作。
这个组件工作得很好，当它到达商店时会改变它的状态。
class testCard extends Component {
test= (event) => {
console.log("!!!!!!!!!!!!!!"); // Shows
this.props.testAction(); // This works
}
render(){
return (
浏览 0提问于2019-04-26得票数 1
回答已采纳
2回答
我的职能是：
$(".tabstrip li").each(function () {
$(this).attr("id") == "searchlist" ? $(this).addClass("selected") : $(this).removeClass("selected");
})
现在我在问自己，我能不能把这个缩短一点。所以我试了一下：
$(".tabstrip li").each(() => $(this).attr("id") == &
浏览 5提问于2016-06-09得票数 0
回答已采纳
我正在使用反身带在我的项目，引导集成。但是，我还需要扩展Button组件的Button行为，该组件是由Reactstrap提供的。为此，我已经做了一个定制的NanoButton组件，它重新组合了默认的组件。我就是这么叫它的：
<NanoButton type="button" onClick={() => Router.push('/about')}>About</NanoButton>
正如我所说的，NanoButton组件将我的自定义onClick功能添加到现有的Button类中：
import { Component } fr
浏览 2提问于2017-08-17得票数 1
回答已采纳
2回答
我试图编写一个函数，用于排序具有动态属性的对象数组。但不起作用。当我写item1.calories的时候，没关系。但是当我使用item1.prop (支持===卡路里)时，它就不起作用了。我试着console.log(prop === "calories")，结果是真的。为什么我不能像这样排列我的数组？谢谢。
var products = [
{ name: "Item1", calories: 170 },
{ name: "Item2", calories: 160 }
];
function sortFunc(item1,
浏览 1提问于2015-07-21得票数 1
回答已采纳
1回答
我正在写一个jQuery插件。但是当我使用箭头函数来扩展jQuery时，它似乎不起作用。
这是可行的：
$.fn.extend({
func: function (params) {
var ob = $(this);
var selector = $(this).selector;
var defaults = {
};
params = $.extend(defaults, params);
generate(ob, selector, params);
}
});
但是当
浏览 2提问于2017-04-30得票数 0
我不明白为什么代码的第一个例子呈现了按钮的ok onPress，而另一个例子当我把它放在一个函数中时，它不能识别函数。 //This executes as expected
render() {
return (
<View style={styles.container}>
<TouchableOpacity onPress={this.handlePress.bind(this)}>
<Text style={{paddingTop: 10, paddingLeft: 10, color:
浏览 23提问于2019-04-04得票数 0
3回答
我试图实现猫鼬虚拟getter：
UserSchema.virtual('fullName')
.get(function () {
return `${this.firstName} ${this.lastName}`;
})
我注意到，当我使用es6箭头函数而不是普通的匿名函数作为get参数时，虚拟getter将返回未定义的参数。
我知道箭头函数保留了this的上下文，但是普通匿名函数使用的this在哪里呢？如果它是由.bind传递的，或者使用了call()/apply()函数，那么无论是箭头函数还是普通函数(至少是我测试的)。那么，为什么这只适用于正常
浏览 3提问于2017-06-02得票数 2
1回答
我正在传递一个道具(项目的所有细节的道具，我将从其中选择一个基于从ItemDetails接收到的ID的产品)到组件中，并且我希望根据通过该URL传递的项Id来显示产品。不幸的是，我无法在this.pops.match.params组件中使用ItemDetails，我不明白为什么它不恢复ItemDetails参数，有人能帮忙吗？
这就是我将道具传递给组件的方式。
<Route exact path='/item/:id' component={()=><ItemDetail itemsData={this.props.itemsData} />} />
浏览 0提问于2020-05-17得票数 0
回答已采纳
5回答
我需要在窗口卸载时使用navigator.sendBeacon()，以便让我的服务器知道客户端已经关闭了他的窗口。我到处都找过了，对我来说就是不起作用。 作为参考，this post中的解决方案也不起作用。 我有一个应用程序组件，包装我的整个项目。我试图在它的componentDidMount()生命周期方法上设置unload事件，但它就是不会触发。 componentDidMount() {
window.addEventListener("beforeunload", this.unload);
}
componentWillUnmount() {
window
浏览 61提问于2019-03-29得票数 3
回答已采纳
我正在尝试创建一个基于 gem的示例应用程序。在我react代码中，像onChange或onSubmit这样的内置react函数不起作用。
我的HelloWorldWidget组件如下所示。
...
constructor(props, context) {
super(props, context);
_.bindAll(this, 'handleChange');
}
handleChange(e) {
const name = e.target.value;
console.log(name);
//this.props.updateName(na
浏览 0提问于2017-08-24得票数 0
2回答
我试图在Javascript ES6类中的方法中调用相同的方法，但它不起作用。
class Client {
constructor(connection) {
this.channels = [];
this.nickname = null;
this.user = null;
this.realName = null;
connection.on('data', this.parse_message);
}
parse_message(message) {
浏览 0提问于2018-03-11得票数 1
回答已采纳
我正在使用babel6，对于我喜欢的项目，我正在为XMLHttpRequest创建一个包装器，用于我可以使用的方法：
open = (method, url, something) => {
return this.xhr.open(method, url, something);
}
但是对于属性，箭头函数不起作用
这是可行的：
get status() { return this.xhr.status; }
但是我不能用
get status = () => this.xhr.status;
这是故意的吗？
浏览 2提问于2015-11-20得票数 129
回答已采纳
我的应用程序从Firebase数据库中检索数据，并试图将其加载到“状态”中，但get错误“无法读取未定义的属性setState”。
我试图在构造函数中添加绑定，但它不起作用
import React from 'react';
import { View } from '@vkontakte/vkui';
import * as firebase from "firebase/app";
import {config} from './dbinit' // import firebase config
import "
浏览 0提问于2019-06-24得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
