areslabs / alita

一套把React Native代码转换成微信小程序代码的转换引擎工具。我们不造轮子,不发明新框架,只是提供工具把RN扩展到微信小程序端。
https://areslabs.github.io/alita
MIT License
1.96k stars 130 forks source link

fix(alita-core): 修复 isChildComp 方法只通过基本组件名称来判断是否需要处理成抽象节点导致的bug #59

Closed canfoo closed 4 years ago

canfoo commented 4 years ago

isChildComp 里有一段代码,来判断是否需要将组件处理成抽象节点判断有问题,如下

export function isChildComp(name) {
    if (wxBaseComp.has(name) || configure.configObj.miniprogramComponents[name]) return false

    // 基本组件children 需要转化为childrencpt的组件
    if (extChildComp.has(name)) {
        return true
    }

    //************************************************//
    // 基本组件children 不需要转化为childrencpt的组件
    if (allBaseComp.has(name)) {
        return false
    }
   //************************************************//

    // 自定义组件 children都需要转化为childrencpt
    return true
}

上面用 //***// 符号包起来这段代码有点问题,这里直接通过名称来判断当前节点是否是属于基本组件(base === true),如果是的话,就不将此节点处理成抽象节点,这个逻辑需要再增加一个判断,判断此节点的来源是否是属于组件库里(npm包),否则如果在业务工程里,刚好有一个节点名称和allBaseComp里一样,就会不处理成抽象节点。例如把/examples/HelloWorldRN/src/a/index.js里一段代码 import MyChildComp from './MyChildComp' 改成 import Hi from './MyChildComp', 就会出现问题,因为 Hi 这个名称是在 @areslabs/hi-rn 包里指定为基本组件的名称,所以此时 import Hi from './MyChildComp' 就会因为 @areslabs/hi-rn 的关系不处理 MyChildComp 的节点为抽象节点,从而导致MyChildComp组件里的this.props.children代码无法渲染。

isChildComp方法需要改造如下:

export function isChildComp(name, filepath) {
    if (wxBaseComp.has(name) || configure.configObj.miniprogramComponents[name]) return false

    // 基本组件children 需要转化为childrencpt的组件
    if (extChildComp.has(name)) {
        return true
    }

    const {im} = getModuleInfo(filepath)
    // 基本组件children 不需要转化为childrencpt的组件
    // 通过组件名称判断还不够,还需要判断来源是否是组件库里
    if (allBaseComp.has(name) && judgeLibPath(im[name].source)) {
        return false
    }

    // 自定义组件 children都需要转化为childrencpt
    return true
}