{ props.onClick() }与{ props.onClick } 的差异

最新推荐文章于 2023-12-08 11:23:05 发布
原创 最新推荐文章于 2023-12-08 11:23:05 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react #props

本文解析了在React中如何正确地使用onClick属性，避免在组件渲染过程中因错误的调用方式而导致的死循环问题。强调了将onClick={props.onClick()}

这里我们把 onClick={() => props.onClick()} 直接修改为 onClick={props.onClick} , 注意不能写成 onClick={props.onClick()} 否则 props.onClick 方法会在 Square 组件渲染时被直接触发而不是等到 Board 组件渲染完成时通过点击触发，又因为此时 Board 组件正在渲染中（即 Board 组件的 render() 方法正在调用），又触发 handleClick(i) 方法调用 setState() 会再次调用 render() 方法导致死循环。

this.props.history.push传值
读心悦
11-26 2万+
react路由设置中，除了标签以外，还有一个this.props.history.push，设置落雨跳转和传值： 第一种方式：在父组件中，设置路由标签： <Link to="/about/:id">About</Link> 第二种方式：在父组件中，设置点击事件： <div onClick={this.click.bind(this)}>About</di...
react-native 自定义容器组件-this.props.children
文化园
06-02 3055
自定义容器组件也是我一直想要实现的，就像<View></View>一样，其中可以放置很多的View组件，来实现我们想要的UI效果；然而这种容器组件可以通过 this.props.children 来实现
为什么函数定义组件中不能打括号
huyao的博客
02-26 503
事件处理函数的写法，这里我们把 onClick={() =&gt; props.onClick()} 直接修改为 onClick={props.onClick} , 注意不能写成 onClick={props.onClick()} 否则 props.onClick 方法会在 Square 组件渲染时被直接触发而不是等到 Board 组件渲染完成时通过点击触发，又因为此时 Board 组件正在渲染中...
JS事件绑定时，函数名为什么不加括号
qq_43560213的博客
06-19 1010
我猜测，不加括号是把checkUsername这个方法名作为参数传入相应的事件中的方法中赋给相应属性，当这一事件发生时才会触发（如离焦事件发生后触发用户名的检验）。而如果后边用的是checkUsername（），它相当于不管事件触不触发，先把checkUsername（）这一方法执行了，将执行的值赋给事件中的属性，它最终会赋什么样的值，就看函数体返回什么类型，这样就变质了，事件绑定就变得毫无意义了。 ...
props中函数this指向问题
bian2845972116的博客
11-16 691
此代码在编译过程中并不会出现类型错误，但当我们在运行代码后，触发Board组件的onClick回调时，却会出现报错，报错提示在handleClick中this.state上并没有找到history属性，此时可见handleClick中的this已经改变指向，不再指向Game而是指向Broad，与期望不符。要使this指向不发生改变，则不能把Game中的定义方法直接传递给Broad，而是传递一个匿名函数，此函数会触发Game中的handleClick，此时this会指向Game而达到期望的效果。
button执行onclick函数_可能你的react函数组件从来没有优化过
weixin_39522103的博客
11-28 268
本文作者：IMWeb lhyt 原文出处：IMWeb社区 未经同意，禁止转载16.6之前，函数组件没有像shouldComponentUpdate这样的方法，也没有类似PureComponent这种解决方案，避免不了函数组件里面所有的代码再次的执行，要依靠外面的条件渲染来控制，或者是高阶组件。之前的话，选择使用函数组件的情况是一些比较简单的又比较纯的组件，只是负责展示的。而且函数组件最终编译b...
React自定义组件使用onClick传参注意:onClick只是一个名字而已!
苏一恒
02-12 3727
核心: React自定义组件不是真实DOM,所以没有onClick属性, 如果对React自定义组件写上onClick,也只是个单纯的名字而已,onClick的值作为props传到子组件. 例如: function Square(props) { return ( <button onClick={props.onClick} ...
props.onClick?.();
最新发布
08-23
在 React 组件中，`onClick` 通常作为 props 传递给组件。下面是一个简单的按钮组件示例，展示了如何处理可选的 `onClick` 函数： ```jsx import React from 'react'; const Button = ({ onClick, children }) => ...
React中传入props.children后, 为什么会导致组件的重新渲染？
m0_71485750的博客
12-08 1947
在 react 中, 我想要对组件的渲染进行优化, 遇到了一个非常意思的问题, 当我向一个组件中传入了 props.children 之后, 每次父组件重新渲染都会导致这个组件的重新渲染;它看起来的表现就像是被memo包裹的组件, props和自身状态未发生变化, 组件却重新渲染了;
C语言知识点
Valdemar的博客
04-10 2027
C语言最全基础知识，一文足矣！
react -- 传递 Props
Knight__D
08-02 2394
React 里有一个非常常用的模式就是对组件做一层抽象。组件对外公开一个简单的属性（Props）来实现功能，但内部细节可能有非常复杂的实现。 可以使用JSX 展开属性来合并现有的 props 和其它值： return Component {...this.props} more="values" />; 如果不使用 JSX，可以使用一些对象辅助方法如 ES6 的Obj
reactjs 子组件onClick 触发父组件定义的方法
Julie_Go的专栏
07-25 3301
如题 父组件 class Parent extends Component { constructor(props) { super(props) this.state = { list:['a','b','c','d'] } this.deleteItem = this.deleteItem.b...
Vue组件之props,emit与on以及slot分发详解
Jasmines1993的个人收藏
03-16 1448
Vue组件实例之间的作用域是孤立存在，要让它们之间的信息互通，就必须采用组件的通信方式。 props用于父组件向子组件传达信息 1.静态方式 例如： <div id="app"> <my-component message="hello"></my-component> </div> <script> Vue.component('my-component',{ template:"<h1>{{message}}&l.
react，es6的括号问题
想飞上天和太阳肩并肩
01-25 1310
react中的return 后面为什么要加括号呢？ JavaScript 会自动给行末添加分号。如果 return 后面换行不加括号就会变成 return;。 就是说因为jsx语句跨行了，如果写在一行是可以省略小括号的。 const About = () =&gt; ( &lt;div&gt; &lt;h2&gt;About&lt;/h2&gt; &lt;/div&gt; ) /...
踩坑记27 vue3 @click 绑定多个事件 | props传输函数死循环 改用emits | ref数组 | template中不能直接使用console.log()
Alloom的博客
10-15 4564
2021.9.22 坑81（vue、@click、绑定多个事件）：@click 绑定多个事件，中间逗号隔开即可，参数各自传输。代码如下： @click='function1,function2(para)' 参考：vue中@click绑定多个事件_YanHSama的博客-优快云博客_@click绑定多个事件 坑82（vue、props、emits、触发函数）：问题场景是父组件使用props传输函数到子组件运行，会死循环（原因不明）。 以add函数为例，主要代码是父组件中以属性式绑定函数:.
javascript中onclick(this)用法和onclick(this.value)用法介绍
热门推荐
只在朝暮间的博客
06-14 6万+
onclick(this.value)代码详解 <html> <head> <script language="javascript"> function test(value){ if(value=='1') { alert("11111111"); }else{ alert
react中的括号()和{}的应用说明
qq_45736175的博客
05-30 2720
在引用antd组件时，return用的就是() 返回js对象时，用的就是{} 还有在model层中返回数据时，用的也是{} 结论： 对于为什么要加括号的问题： JavaScript 会自动给行末添加分号。如果 return 后面换行不加括号就会变成return; 对于什么情况加()括号的问题: return( <div>....</div> //HTML代码 ) return( <Component/> //r...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值