React转微信小程序:双模板联动
这是本系列的最后一篇。小程序封死了操作DOM的可能性,并且也不让我们操作视图,所有与视图有关的东西一律接触不了。而它的自定义组件是非常恶心,基本不配叫组件,不能继承叫什么组件。因此我们使用它更早期的动态模板技术,template。 我的思路如下,通过编译组件的render方法,将里面的自定义组件变成template类,然后在template类中自己初始化,得到props, state再传给小程序的template标签。换言之,有两套模板。
//源码 import { Page } from "../wechat"; import "./page.css"; import Dog from "../components/dog/dog"; const e = "e"; class P extends Page { constructor(props) { super(props); this.state = { name: 'hehe', array: [ {name: "dog1",text: "text1"}, {name: "dog2",text: "text2"}, {name: "dog3",text: "text3"}, ] }; } onClick() { console.log("test click1" + e); } render() { return ( {this.state.array.map(function(el) { return <Dog name={el.name}>{el.text}; })} <Dog name={this.state.name} /> ); } } export default P; 我们先不管Dog组件长得怎么样。 为了让它同时支持小程序与React的render函数,我们需要对render进行改造。将Dog,div等改造成小程序能能认识的类型,如 <view> <view> {this.state.array.map(function(el) { return <template is={Dog} name={el.name}>{el.text}template>; })} view> <template is="Dog" name={this.state.name} /> view> 这个转译是如何实现呢,我们可以通一个插件 syntax-jsx, 它会在visitor遍历出JSX的开标签,闭标签,属性及{}容器。
(此图片来源于网络,如有侵权,请联系删除! ) 但React无法认识template标签,因此还要改造 //React专用 <view> <view> {this.state.array.map(function(el) { return <React.template is={Dog} name={el.name}>{el.text}</React.template>; })} </view> <React.template is={Dog} name={this.state.name} /> </view> 现在看小程序这边 小程序无法认识{},需要改变成wx:for指令 //小程序专用 <view> <view> <block wx:for="{{this.state.array}}" wx:for-item="el"> <template is="Dog" name={el.name}>{el.text}</template>; </block> </view> <template is="Dog" name={this.state.name} /> </view> 小程序的template有个缺憾,它无法认识name这样的属性的,因此我们需要一个东西装着它。那么我们动态创建一个数组吧,改一改React那边: //React专用 <view> <view> {this.state.array.map(function(el) { return <React.template is={Dog} name={el.name} templatedata="data123124342">{el.text}</React.template>; })} </view> <React.template is={Dog} name={this.state.name} templatedata="data34343433" /> </view> templatedata这个属性及它的值是babel在编译时创建的,React.template到时会在this.data.state添加data123124342数组,内容为一个个对象,这些对象是通过Dog.props, Dog.defaultProps, Dog.state组成。结构大概是{ props: {}, state: {} } 那么小程序的模板则改成这样,去掉各种template不认识的东西,加上wx:for属性,它对应React方的templatedata值。然后template有一个data属性,通过对象解构,完美把所有属性(除方法)传到dog的模板中。 //小程序专用 |
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
本站为避免不必要的纷争,分享的所有资源中一切可能有版权风险的资源将全部转载自第三方网站或平台,站长只为大家提供相关资源的介绍和跳转引导。 因可能有疏忽大意,所以如有遗漏资源侵犯了您的合法权利,请联系站长删除。
【小程序源码网资源下载使用说明】:
本站所分享的一切QQ小程序源码,thinkphp整站源码,微信小程序源码,图文教程等资源仅供用户学习参考使用,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网毫无人看的介绍】:
本站又称Z站,原名贼娘网,开站于2018年,换过三任站长,目前站长是第四任站长,本站是一个主要分享免费开源小程序源码/网站源码/免费素材/教程资源的网站,主要小程序资源有用于学习的小程序源码,也有正版原创可商用的小程序源码,是一个公益博客型网站。
【小程序源码网原创源码版权申明】:
未经小程序源码网许可,任何人不得擅自使用本站原创首发源码进行商业行为(除本站VIP用户在期限内,版权无使用限制),否则将依法承担相应赔偿责任。
【小程序源码网转载文章版权申明】:
本站所转载的QQ小程序或微信小程序源码与其他资源仅供学习,任何人不得作其他用途,违者自行承担所有责任。
【小程序源码网站长最后的屁话】:
如有您认为本站有任何侵犯您合法权益的文章,或者您有什么疑问需求,欢迎联系站长QQ,站长24小时在线,备注公司名称和源码版权问题或者需要小程序定制开发等站长业务类型可急速处理,如果您只是交流小程序的一些开发问题或源码问题可以加入QQ群讨论,就不用加站长啦,对于白嫖党,QQ群才是处理问题的天堂,当然站长也欢迎大家骚扰~
小程序源码网 » React转微信小程序:双模板联动