React转微信小程序:双模板联动

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={