vue js的createElement函数不会完全返回组件答案

【问题标题】：createElement function of vue js doesn't return compeletly componentvue js的createElement函数不会完全返回组件
【发布时间】：2021-12-28 18:27:56
【问题描述】：

有一种情况是我需要为特定原因编写一个功能组件。那就是获取它的所有孩子并为他们添加一些道具。但关键是，我需要将这些道具添加到类型为ChildComponent 的特定自定义组件中。我是这样走的：

MyHigherOrderComponent.vue

    render: function(createElement, context){
        const preparedChildrenLevel1 = context.children.map(child => {
            if(child.componentOptions.tag !== "ChildComponent"){
                return child;
            }

            return createElement(
                ChildComponent,
                {
                    props: {
                        ...child.componentOptions.propsData,
                        level1: "level1"
                    }
                },
                child.componentOptions.children
            )
        });
    },

这实际上工作正常。然后我想使用preparedChildrenLevel1 映射投掷它并向ChildComponent 类型的孩子添加另一个道具。但这次我从child.componentOptions.tag 得到undefined。

MyHigherOrderComponent.vue

    render: function(createElement, context){
        //First level of adding props to children
        const preparedChildrenLevel1 = context.children.map(child => {

            //In here child.componentOptions.tag is equal to 'ChildComponent'
            if(child.componentOptions.tag !== "ChildComponent"){
                return child;
            }

            return createElement(
                ChildComponent,
                {
                    props: {
                        ...child.componentOptions.propsData,
                        level1: "level1"
                    }
                },
                child.componentOptions.children
            )
        });

        //Socond level of adding props to children
        const preparedChildrenLevel2 = preparedChildrenLevel1.map(child => {

            //In here child.componentOptions.tag is equal to 'undefined'
            if(child.componentOptions.tag !== "ChildComponent"){
                return child;
            }

            return createElement(
                ChildComponent,
                {
                    props: {
                        ...child.componentOptions.propsData,
                        level2: "level2"
                    }
                },
                child.componentOptions.children
            )
        });
    },

我需要在多个级别上获取这种特定类型的组件。

注意：这是我完整的组件实现以及我如何使用它

MyHigherOrderComponent.vue

<script>
export default {
    name: "MyHigherOrderComponent",

    functional: true,

    render: function(createElement, context){
        //First level of adding props to children
        const preparedChildrenLevel1 = context.children.map(child => {

            //In here child.componentOptions.tag is equal to 'ChildComponent'
            if(child.componentOptions.tag !== "ChildComponent"){
                return child;
            }

            return createElement(
                ChildComponent,
                {
                    props: {
                        ...child.componentOptions.propsData,
                        level1: "level1"
                    }
                },
                child.componentOptions.children
            )
        });

        //Socond level of adding props to children
        const preparedChildrenLevel2 = preparedChildrenLevel1.map(child => {

            //In here child.componentOptions.tag is equal to 'undefined'
            if(child.componentOptions.tag !== "ChildComponent"){
                return child;
            }

            return createElement(
                ChildComponent,
                {
                    props: {
                        ...child.componentOptions.propsData,
                        level2: "level2"
                    }
                },
                child.componentOptions.children
            )
        });
    },
}

</script>

App.vue

<template>
    <MyHigherOrderComponent>
        <p>child1</p>
        <p>child2</p>
        <ChildComponent :level0="level0">child3</ChildComponent>
        <p>child4</p>
        <ChildComponent :level0="level0">child5</ChildComponent>
        <ChildComponent :level0="level0">child6</ChildComponent>
    </MyHigherOrderComponent>
</template>

【问题讨论】：

标签： javascript vue.js vue-component options createelement

【解决方案1】：

当元素不是ChildComponent 时，其中没有child.components，因此您应该在条件中添加另一个检查：

if(!child.componentOptions || child.componentOptions.tag !== "ChildComponent") {
    return child;
}

这样可以确保只允许ChildComponent 进入您的其余代码。
顺便说一句，您在MyHigherOrderComponent 的render 函数中没有返回任何内容

【讨论】：