React轉(zhuǎn)微信小程序:雙模板聯(lián)動
|
這是本系列的最后一篇。小程序封死了操作DOM的可能性，并且也不讓我們操作視圖，所有與視圖有關(guān)的東西一律接觸不了。而它的自定義組件是非常惡心，基本不配叫組件，不能繼承叫什么組件。因此我們使用它更早期的動態(tài)模板技術(shù),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函數(shù)，我們需要對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>
這個轉(zhuǎn)譯是如何實現(xiàn)呢，我們可以通一個插件 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>
現(xiàn)在看小程序這邊 小程序無法認識｛｝,需要改變成wx:for指令
//小程序?qū)Ｓ?
<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這樣的屬性的，因此我們需要一個東西裝著它。那么我們動態(tài)創(chuàng)建一個數(shù)組吧，改一改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在編譯時創(chuàng)建的，React.template到時會在this.data.state添加data123124342數(shù)組，內(nèi)容為一個個對象，這些對象是通過Dog.props, Dog.defaultProps, Dog.state組成。結(jié)構(gòu)大概是{ props: {}, state: {} } 那么小程序的模板則改成這樣，去掉各種template不認識的東西，加上wx:for屬性，它對應(yīng)React方的templatedata值。然后template有一個data屬性，通過對象解構(gòu)，完美把所有屬性（除方法）傳到dog的模板中。 //小程序?qū)Ｓ?/pre> |
