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} />我们先不管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的模板中。 //小程序专用 |
