react函数组件父子组件传值（react组件中方法调用）

时间2025-06-20 16:57:11分类IT科技浏览5123

导读： 我们在初学react时(有vue等其他基础，我们在方法调用的时候通常是方法名( ...

　　我们在初学react时(有vue等其他基础) ，我们在方法调用的时候通常是方法名()

例如：

这样调用的话你会发现点击并不能使之触发事件，但是触发了重新渲染(修改state中的值) ，在控制台却发现输出了两次：测试点击

若我们写成这样<button onClick={this.handleClick}>点击</button> 发现并没有什么问题。

但是在javaScript中若我们声明一个函数，调用的时候都是函数名()

例如：

var aa = (data=) => { console.log(这是箭头函数:,data)} aa() aa(测试)

这是我个人猜测：

在react中，jsx语法通过babel解析成浏览器可以识别的语法，它在解析时可能默认的给每一个方法加上()—自调用

例如：onClick={this.handleClick()} ->onClick={(this.handleClick())()} ---这样比如会报错this.handleClick(...) is not a function（有可能babel解析时又加了() ）

这样比如：<button onClick={ (() => { console.log(模拟问题:,data)})()}>模拟问题</button>

我们可以拿jax语法中调用函数与javaScript比较

//React代码 import React from react export default class Login extends React.Component{ state = { name:login } handleClick = () => { return () => { console.log(测试点击) } } render() { return ( <div>这是login组件{this.state.name} <button onClick={ this.handleClick()}>模拟问题2</button> </div> ) } } //Javascript代码 var lee = () => { return () => { console.log(这是jacaScript测试)}} lee()()

我们可以通过测试得到在babel编辑后的jsx语法中this.handleClick() ==lee()() 的调用

此上都是我个人的猜测

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。