HcySunYang / vue-design

📖 master分支:《渲染器》
http://hcysun.me/vue-design/zh/
6k stars 918 forks source link

vue hoc不显示插槽 #307

Open Envov opened 3 years ago

Envov commented 3 years ago

vue hoc那边$slots里面的vnode是数组不是对象

.map(vnode => {
          vnode.context = this._self
          return vnode
        })

vnode是一个数组,改为⬇️

.map(vnodes => {
          vnodes.forEach(vnode => (vnode.context = this._self));
          return vnodes
        })
Envov commented 3 years ago

//成功代码

import * as R from "ramda";
//重载vnodes的方式
const how2ReloadVnodes = that =>
  R.compose(R.forEach(vnode => (vnode.context = that._self)));
//用xxxxx组合slots
const composeSlotsWith = how => fromWho =>
  R.compose(R.map(how(fromWho)), R.values);

export const WithConsole = something => WrappedComponent => {
  return {
    mounted() {
      console.log(`I have already ${something}`);
    },
    props: WrappedComponent.props,
    render(createElement) {
      const { $slots, $listeners, $props, $scopedSlots, $attrs } = this;
      const slots = composeSlotsWith(how2ReloadVnodes)(this)($slots);
      // 什么是vue的 h(createElement)函数 见 https://segmentfault.com/a/1190000020526322*/
      return createElement(
        WrappedComponent,
        {
          on: $listeners,
          props: $props,
          scopedSlots: $scopedSlots,
          attrs: $attrs,
        },
        slots
      );
    },
  };
};