绑定到React组件的函数不能传递给子组件并重新绑定
问题描述：绑定到React组件的函数不能传递给子组件并重新绑定。
回答： 在React中，绑定到组件的函数默认是不可传递给子组件并重新绑定的。这是因为在React中，函数的绑定是在组件的构造函数中进行的，而子组件是通过父组件的props来接收函数的。当父组件将函数传递给子组件时，子组件会创建一个新的函数引用，而不是继承父组件的函数绑定。
解决这个问题的方法有多种，下面介绍两种常用的方法：
- 使用箭头函数： 可以使用箭头函数来创建一个匿名函数，并将其传递给子组件。箭头函数会继承父组件的函数绑定，因此可以在子组件中重新绑定。
示例代码：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Clicked!');
}
render() {
return (
<ChildComponent onClick={() => this.handleClick()} />
);
}
}
class ChildComponent extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>Click me</button>
);
}
}- 使用bind方法： 可以使用bind方法来创建一个新的函数，并将其传递给子组件。bind方法会将父组件的函数绑定到新函数上，因此可以在子组件中重新绑定。
示例代码：
class ParentComponent extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
console.log('Clicked!');
}
render() {
return (
<ChildComponent onClick={this.handleClick.bind(this)} />
);
}
}
class ChildComponent extends React.Component {
render() {
return (
<button onClick={this.props.onClick}>Click me</button>
);
}
}以上两种方法都可以解决绑定到React组件的函数不能传递给子组件并重新绑定的问题。根据具体的场景和需求，选择适合的方法即可。
推荐的腾讯云相关产品：
- 云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 云函数（SCF）：https://cloud.tencent.com/product/scf
- 云数据库 MySQL 版（CDB）：https://cloud.tencent.com/product/cdb
- 云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云区块链服务（TBC）：https://cloud.tencent.com/product/tbc
请注意，以上推荐的腾讯云产品仅供参考，具体选择应根据实际需求进行评估和决策。
相关·内容
我在这个上下文问题上遇到了麻烦：import logo from './logo.svg'; <FooClosure /> );}
我正在尝试在父组件中定义<e
浏览 35提问于2018-02-24得票数 1
回答已采纳
我在它的版本中实现了一个叫做react-hover的小react组件。 render () { <div
onMouseOver={this.onMouseOver
浏览 2提问于2017-05-02得票数 3
1回答
我在ReactJS中有两个功能组件，即父组件和子组件。我从父组件中将一个函数作为支柱传递给子组件。const name = "child"; return (<p>Child</p>)在上面的组件子组件中
浏览 2提问于2020-08-29得票数 1
回答已采纳
我有一个React父组件，用于保存整个应用程序的状态。我想将一个函数传递给子组件，这样当单击该子组件中的按钮时，它就会更改父组件的状态。现在我可以对一个层执行此操作，但是，当我尝试将该函数向下传递到下一层时(如上所述，一个子组件向下传递它作为道具接收的函数)，我的</
浏览 3提问于2018-10-13得票数 2
1回答
我试图将一个点击处理函数传递给子组件，但是我不明白为什么它不能工作。我尝试将单击处理程序设置为lambda函数，将其绑定到父组件，并将子组件中的onClick设置为lambda函数，但似乎都不起作用。父组件import NavMenuB
浏览 2提问于2019-08-03得票数 0
回答已采纳
1回答
我主要是用AngularJS进行开发，最近我正在查看Vue.js并阅读它的指南，在其中提到的一页上：
我想知道什么时候使用双向绑定，
浏览 2提问于2016-05-30得票数 2
回答已采纳
我在React (使用钩子)中的forceSimulation遇到了一些问题。问题是，每当数据改变时，每个气泡的位置都会转换到屏幕的中间，而不是考虑它之前的位置(参见gif)，这使得气泡以一种恼人的方式跳跃。我没有太多将forceSimulation、d3和react-hooks结合使用的经验，而且很难找到任何类似的示例；因此，如果有任何指导，我将非常感激。import React, { useEffect, useRef } fro
浏览 0提问于2021-03-29得票数 2
2回答
当单击以showExtraBlogposts呈现的按钮时，我想在Blogpostreader.js中调用函数Blog.js ()import React from 'react';
import axios from 'axios</div>)
浏览 3提问于2019-05-13得票数 0
1回答
我找到了动态创建子组件、将数据传递给它们并相应地呈现它们的代码。
但是，我不知道如何将子组件中的数据绑定到其父组件。在我上面包含的柱塞中，我想要双向数据绑定到showNum。有什么想法吗？
浏览 2提问于2017-04-01得票数 1
回答已采纳
我有一个这样的函数： func: function() { }它作为一个道具传递给React组件： funcAsProp: obj.func然后在react组件中调用，如下所示： displayName(&#x
浏览 14提问于2016-08-04得票数 1
回答已采纳
1回答
我想知道是否有人可以帮助我理解React Native binding的问题和含义。我们已经构建了一个客户端应用程序，它有几个视图和一个侧边导航-所有这些都使用事件的样式语法： <TouchableOpacity onPress={() => this.removephoto(key)}> 这是有可能发生内存泄漏的错误方法吗?我是否应该使用绑定ie - <TouchableOpacity onPress={this.removephoto.bind(this, key)}>
浏览 12提问于2019-09-27得票数 0
回答已采纳
我正试图在React和Redux中建立一个待办事项列表。在下面的代码中，我有一个带有函数onDeleteItem的组件。问题是我不能将onDeleteItem函数传递给子组件项。如果运行此代码，将得到“无法读取未定义的属性'onDeleteItem‘”错误。但是，如果我试图将映射函数之外的函数传递给子组件</e
浏览 7提问于2016-07-05得票数 2
回答已采纳
我注意到，当我使用react时，子组件的状态更改不会重新生成没有状态更改的父组件。下面的代码沙箱显示了这一点：
React递归遍历树，并在单个滴答期间调用整个
浏览 0提问于2018-12-30得票数 39
回答已采纳
1回答
父组件是函数组件。它有一个箭头函数，可以导航到另一条路由。我想把这个箭头函数传递给一个子组件，它是一个类组件。但是我不知道为什么它看起来不工作，当我在类组件中使用它时，它不导航。也许我把道具传错了。父组件 let query =
浏览 5提问于2022-07-19得票数 0
我正在用父-子模式下的多个组件处理ReactJS。在下面的示例中，update函数从Board组件(父组件)传递给Note组件(子组件)。当我执行代码时，我得到了Uncaught TypeError: Cannot read property 'update' of undefined错误，构造函数中有一个绑定(这个)。import React, { Compo
浏览 1提问于2016-01-13得票数 4
回答已采纳
我有一个父组件，它有两个子组件，如下所示 子组件的数据来自服务的父组件，并使用输入属性传递给子组件。因为数据量非常大，我们有很多自定义组件，比如下拉列表和表格。将数据绑定到html元素需要时间，因为我们在一个子元素中有47个droddowns。我想知道当html绑定完成时触发的事件，即ts中<
浏览 22提问于2019-01-25得票数 0
我正在优化应用程序的性能，我想知道是否对那些不依赖于任何变量的函数使用useCallback钩子。：
let someVar = "someVal";};
还是
浏览 3提问于2020-06-10得票数 10
回答已采纳
本质上，我想要做的是保持对onChange函数的常量引用。在上面的示例中，当React重新呈现我的组件时，如果输入值没有改变，它将不会重新呈现输入。，我需要将text分别传递给transformText和setText到onChange方法。我能想到的可能的解决办法是：
定义组件函数中的函数，并</
浏览 0提问于2019-02-08得票数 13
2回答
我有一个将函数传递给子组件的react组件，并将其绑定到onClick。但是，当我单击时，我会得到一个错误：
var Dad = React.createClass({ alert('being
浏览 1提问于2016-01-18得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
