Taro踩坑记：往子组件传函数，需要以on开头

最新推荐文章于 2025-06-20 00:24:54 发布
最新推荐文章于 2025-06-20 00:24:54 发布
阅读量4.1k 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/peade/article/details/88759839
本文介绍了Taro框架中JSX书写规范的一条重要规则：当子组件接收父组件传递的函数作为属性时，该属性名必须以'on'开头。如果不遵循此规则，将导致函数无法正确传递，最终接收值为null。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

在Taro的书写规范中，对于JSX的规范里，有这么一条

子组件传入函数时属性名需要以 on 开头

如果不是以on开头，那么在子组件上的参数上，赋值上函数，依然是传不进去的。最后是null值。

 

Taro - 父子组件间通信
qq_42228073的博客
07-14 2484
最近入坑了一波Taro，打算重构当前手上的原生小程序项目。 但是这个文档和版本啊搞得人头大，真的是边踩坑边成长。 我是用的Taro 1.x版本中的1.3.42.（恐版本之间差异致使当前版本可使用的方法不可用，基本是小概率事件）。 先说父 - 子 传值，这个和小程序基本一样不过是格式和方法名不一样。 这是微信小程序父组件往子组件传值的方式。如果有直接上手小程序框架的同学不了解原生组件间传值的可看下面这个链接 https://blog.youkuaiyun.com/qq_42228073/article/deta
taro-list:Taro 列表滚动组件
04-16
taro-list 支持下拉刷新 、 加载更多 、虚拟列表 安装及使用 npm i taro-list 小程序 demo 配置文件里添加 copy: { patterns: [ { from: 'node_modules/taro-list/dist/weapp/components/List/refresh.wxs', to...
Taro学习笔记_写子组件并传参
kyyius的博客
07-04 260
子组件文件位置/src/pages/index/son.jsx // 这里这是演示，要规范子组件的位置哦 import { View, Text } from '@tarojs/components' function Son(props) { return ( <View> <Text>Im son get father value props: { props.por }</Text> </View> ) } export defau
Taro 组件开发完全指南：构建跨平台可复用组件
最新发布
vvilkin的学习备忘
06-20 1227
在当今多端开发的时代，Taro 作为一款优秀的跨平台开发框架，为开发者提供了"一次编写，多端运行"的能力。而组件化开发是 Taro 应用构建的核心，良好的组件设计能显著提升开发效率和代码质量。本文将全面介绍 Taro 组件的开发理念、实现方式和最佳实践。
taro 填坑之路（二）taro 通过事件监听 实现组件间传值
weixin_33829657的博客
11-18 1万+
1.组件传值的方式 2.事件监听原理 3.事件管理器 utils/event.js /** * 事件池(事件管理器) * 通过事件监听传值 */ class Event { constructor() { this.events = {}; } // 监听 on(eventName,callBack){ if(this.events[eventName...
ios小程序上传文件使用onHeadersReceived获取header中的参数
weixin_46613448的博客
03-09 391
获取header中的参数
Taro 常见规范和语法特性、常用 API 以及避坑指南
qq_36437172的博客
07-26 1557
一、Taro 规范 在 Taro 组件中会包含类静态属性、类属性、生命周期等的类成员，其书写顺序最好遵循以下约定（顺序从上至下）。 static 静态方法 constructor componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount 点击回调或者事件回调
taro-skeleton:基于Taro的一个骨架屏组件，简单易用
05-06
基于 Taro 的一个简单易用的骨架屏组件 2.0版本以上支持 Taro3.0 支持多端平台使用 微信小程序 h5 百度小程序 头条小程序 支付宝小程序 其它平台未测试 快速上手 引入组件 import Skeleton from 'taro-skeleton' ...
taro_component:基于taro创建的小程序组件
05-29
开发者需要熟悉ES6+的语法特性，如箭头函数、解构赋值、模板字符串等，以便更好地理解并使用这些组件。 在压缩包"taro_component-master"中，我们可以期待找到以下内容： 1. `src`目录：存放组件源代码，每个组件...
taro-inject-component-loader:为 Taro React 小程序注入全局组件
05-21
Taro React 小程序注入全局组件 缘由 众所周知，小程序中不能定义全局组件，如果我们想自定义一个 modal 弹窗，来替代 wx.showModal 的话，则需要在每个页面手动的引入组件。随着项目越来越大，手动引入组件无疑是...
vertify-app:taro手机验证码组件，和taro虚拟数字键盘组件0.1版
03-18
【标题】：“vertify-app：Taro手机验证码组件与虚拟数字键盘组件0.1版”是针对Taro框架开发的一款轻量级UI组件库，专为移动应用的验证码输入和数字键盘交互提供解决方案。 【描述】：vertify-app组件库包含两个...
微信小程序之RequestTask.onHeadersReceived 302的时候无法监听
weixin_41012767的博客
03-05 4221
用get不能正确解析location post可以 对于302状态微信小程序没有很好的解决办法，请求大概率会返回200，在服务器用python做完之后，返回最终地址，是一个不错的解决方案 a开头的是返回302，其他的是200状态 302状态会有个Response Headers 里会有个location的成员。就是跳转的最终地址 http状态码解释 3xx （重定向） 重定向代码，也是常见的代码 300（多种选择）针对请求，服务器可执行多种操作。 服务器可根据请...
react父组件向子组件传值(props)、受控组件和非受控组件以及React中的插槽
你华还是你华
03-05 2893
但是这种方案也有弊端，如果子组件接收这个input的值，能传给子组件，将不会实时更新，因为没有更新状态。接下来将介绍受控组件。中，用了备份数据，但是这样会占用内存，现在我们学了受控组件了，我们用受控组件来更改下，我们将。绑定了，这样后续如果有子组件传入该值的话，也是可以监听到变化的，这个就是受控组件。如果刚好有个对象，里面的属性传给子组件的属性的。节点中的值，在非受控组件中，你经常希望。
Taro请求问题
weixin_33736832的博客
12-03 5373
2019独角兽企业重金招聘Python工程师标准>>> ...
vue 父组件给子组件传递一个函数
逍湘子
05-27 8341
vue 中父子组件通信的基本原理是：父组件通过props给子组件下发一个属性来传递数据，而子组件通过emit去向上触发父组件中的事件来达到相互通信的目的。当然还有其他的，这个暂不讨论。 而props的数据类型可以是: props: { title: String, likes: Number, isPublished: Boolean, commentIds: Array, author: Object, callback: Function, contactsPromise:
Taro 小程序父组件如何向子组件传参
qq_36437172的博客
02-18 1200
父组件向子组件传参，子组件在 this.props 中可以接收父组件传递过来的参数。 首先定义父组件： classClientextendsComponent{ render(){ const{ list, type }=this.state return( <View> <ViewclassName="list"> { list.map((list,index)...
vue3+taro里面怎么使用selectComponent，VUE3怎么使用ref
肖肖肖丽珠的博客
01-05 1475
vue3+taro里面怎么使用selectComponent在父组件里面访问自组件的函数呢？最后使用的defineExpose把子组件暴漏出去，然后父组件使用ref的方法获取到。child.value.子组件的函数。但是效果没有出来访问不到子组件。
taro框架的缺陷以及注意事项
热门推荐
gwdgwd123的博客
12-02 4万+
https://www.jianshu.com/p/9d3318f7f219 1.不要使用 eval() 2. 禁止使用 Object 构造器 let config = new Object() // ✗ 错误   3. 不使用 Generator 函数语法 使用 Promise 或者 async functions 来实现异步编程 function* helloWo...
Taro使用ref - Kaiqisan
Kaiqisan的博客
03-05 2980
大家好，都吃晚饭了吗？我是Kaiqisan,是一个已经走出社恐的一般生徒，今天还是说说Taro的一些东西 之前在写项目的时候试图修改某个块的样式，首先想到的就是使用ref来获取DOM节点修改，但想想使用DOM修改样式是最nc最消耗性能的，于是我就直接使用了state参数来修改. 后来，回过头来想重新来学下ref的使用方法，于是有了今天的博客 本篇博客素材来自官网 Refs 引用 Ref其实有多种引用方法，其实最简单的就是直接引用，就和vue一样，直接引用，直接使用 (代码是ts，如果您是js选手请手动过.
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值