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 (
<div>
<div>
{this.state.array.map(function(el) {
return <Dog name={el.name}>{el.text}</Dog>;
})}
</div>
<Dog name={this.state.name} />
</div>
);
}
}
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={thi