使用Typescript装饰器来劫持React组件
前端  /  管理员 发布于 5年前   223
最近在捣鼓Typescript的装饰器,Nodejs项目的装饰器比较好理解,但是react项目的装饰器由于有jsX,走了一点弯路,但是总之来说是新技能get
装饰器为我们提供了运行时修改数据的能力。
Parent.tsx
@Componentexport default class App extends PureComponent { handleClick() { console.log('parent click'); } render() { return ( <div className="App" onClick={this.handleClick}>parent</div> ); }}
Component装饰器
function Component<T extends { new(...args: any[]): any }>(component: T) { // 泛型限定 return class extends component { handleClick() { // 劫持onClick super.handleClick() console.log('child clicked'); } render() { const parent = super.render() // 劫持onClick return React.cloneElement(parent, { onClick: this.handleClick }) } }}
点击渲染之后的parent字符,可以看到劫持成功
项目地址:react-decorator-example123 在
Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..原梓番博客 在
在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..博主 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..1111 在
佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..路人 在
php中使用hyperf框架调用讯飞星火大模型实现国内版chatgpt功能示例中评论 教程很详细,如果加个前端chatgpt对话页面就完美了..Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号