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

最新推荐文章于 2025-06-20 00:24:54 发布
原创 最新推荐文章于 2025-06-20 00:24:54 发布 · 4.1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了Taro框架中JSX书写规范的一条重要规则：当子组件接收父组件传递的函数作为属性时，该属性名必须以'on'开头。如果不遵循此规则，将导致函数无法正确传递，最终接收值为null。

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

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

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

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

 

【taro react】 ---- 解决 Swiper 组件的 circular 属性为 true 时，在 H5 出现点击实现失效问题
止于至善
02-20 114
通过第三步和第四步的结果，可以看出 Swiper 组件的【衔接滑动模式】会导致复制的子组件在H5的时候，会导致子组件的事件失效。通过事件冒泡，在父元素事件统一管理子元素的点击事件；通过 id 来获取点击元素在列表中的索引；通过索引找到列表中对应的元素对象；最后执行原来的点击事件的跳转方法。
taro tab和swiper联动
aaMyCup的博客
07-23 723
tab页和swiper联动比较简单直接贴代码了 # index/index.jsx import React, { Component } from 'react' import { View, Swiper, SwiperItem, Image } from '@tarojs/components'; import './index.scss' import { AtIcon, AtButton } from 'taro-ui'; const navList = ["全部", "待消费", "待评
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 填坑之路（二）taro 通过事件监听 实现组件间传值
热门推荐
weixin_33829657的博客
11-18 1万+
1.组件传值的方式 2.事件监听原理 3.事件管理器 utils/event.js /** * 事件池(事件管理器) * 通过事件监听传值 */ class Event { constructor() { this.events = {}; } // 监听 on(eventName,callBack){ if(this.events[eventName...
Taro 组件开发完全指南：构建跨平台可复用组件
最新发布
vvilkin的学习备忘
06-20 1230
在当今多端开发的时代，Taro 作为一款优秀的跨平台开发框架，为开发者提供了"一次编写，多端运行"的能力。而组件化开发是 Taro 应用构建的核心，良好的组件设计能显著提升开发效率和代码质量。本文将全面介绍 Taro 组件的开发理念、实现方式和最佳实践。
Taro 常见规范和语法特性、常用 API 以及避坑指南
qq_36437172的博客
07-26 1557
一、Taro 规范 在 Taro 组件中会包含类静态属性、类属性、生命周期等的类成员，其书写顺序最好遵循以下约定（顺序从上至下）。 static 静态方法 constructor componentWillMount componentDidMount componentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount 点击回调或者事件回调
taro之Swiper的使用
2201_75705263的博客
03-23 1075
taro之swiper组件
微信小程序之RequestTask.onHeadersReceived 302的时候无法监听
weixin_41012767的博客
03-05 4221
用get不能正确解析location post可以 对于302状态微信小程序没有很好的解决办法，请求大概率会返回200，在服务器用python做完之后，返回最终地址，是一个不错的解决方案 a开头的是返回302，其他的是200状态 302状态会有个Response Headers 里会有个location的成员。就是跳转的最终地址 http状态码解释 3xx （重定向） 重定向代码，也是常见的代码 300（多种选择）针对请求，服务器可执行多种操作。 服务器可根据请...
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-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组件库包含两个...
taro Swiper组件--异形滚动
hanchengmei的博客
08-09 1227
【代码】taro Swiper组件--异形滚动。
使用Taro自带的Swiper和SwiperItem，为什么有元素，却没显示呢
weixin_43517190的博客
07-31 484
问：使用Taro自带的Swiper和SwiperItem，为什么有元素，却没显示呢？在app中，Swiper和SwiperItem一定要给固定的宽度和高度。注意：在小程序中， Swiper一定要设置宽度。
vue子组件调用父组件中方法的三种方法
Misnice的博客
09-02 3479
1.在子组件中用this.$parent.fn()来调用父组件的方法 父组件中 <script> export default { methods: { parentFn() { console.log('父组件的方法'); } } }; </script> 子组件中 <template> <div> <div @click="handleClick()">点击</
taro项目自动轮播图点击事件失效解决思路
weixin_46046808的博客
12-09 929
taro自动轮播swiper点击事件失效解决思路
小程序或者taro中swiper默认高度150px
沙骑马
06-17 1430
Swiper以及SwiperItem，Image不要使用百分比，设置.swiper-container高度覆盖
taro坑之 父子通信 在父组件数据更新后 子组件时而可以接受到最新变化的值（导致子组件不更新渲染页面） 时而接受不到 暂时的处理方式是不使用组件嵌套 直接在父组件中完成
gwdgwd123的博客
01-28 6553
import Taro, { Component } from '@tarojs/taro' import { observer, inject } from '@tarojs/mobx' import { fromJS, is ,List} from 'immutable' import DraggableArea from "../../components/DraggableArea"...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值