在React渲染器中，如何为自定义组件实现createInstance（）？

Question

我已经制作了一个自定义的React渲染器。它可以从任何事先知道传递到React.createElement中的类型的ReactNode创建实例（例如，我的组件注册表，例如"div"）。但是，我看不到如何处理围绕这些核心组件的自定义组件（因为它们没有简单的字符串类型；它们是对类的引用）。

createInstance()实施

我创建了一个用于react-reconciler的主机配置：

const hostConfig = {
        // ... Other HostConfig methods...

    createInstance(
        type,
        props,
        rootContainerInstance,
        hostContext,
        internalInstanceHandle,
    ){
        const typesMap = {
            "div": () => document.createElement("div")
        };

        const elementFactory = typesMap[type];

        if(elementFactory){
            const domElement = elementFactory();
            const child = props.children;

            if(child){
                console.assert(
                    !Array.isArray(child),
                    "Expected to handle only one child."
                );

                const childElement = hostConfig.createInstance(
                    child.type, // Expecting string
                    child.props,
                    rootContainerInstance,
                    hostContext,
                    internalInstanceHandle
                );
                hostConfig.appendChild(domElement, childElement);
            }

            return domElement;
        } else {
            throw new Error(`[createInstance()] Unknown type:\n${type}`);
        }
    },

    appendChild(parentInstance, child){
        parentInstance.appendChild(child);
    },
}

自定义组件

我有一个自定义组件，该组件将另一个自定义组件作为子组件。

const React = require("react");

// Basic custom component that wraps a <div>.
export class MyCustomView extends React.Component {
    render(){
        const { children, ...rest } = this.props;

        return React.createElement(
            'div',
            {
                ...rest
            },
            children
        );
    }
}

// This custom view passes a MyCustomView child into a MyCustomView parent.
export class NestedContentView extends React.Component {
    render(){
        return React.createElement(
            MyCustomView,
            {
                style: {
                    backgroundColor: "yellow",
                }
            },
            React.createElement(
                MyCustomView,
                {
                    style: {
                        backgroundColor: "orange",
                    }
                }
            )
        );
    }
}

要渲染的树

我将把两层的自定义组件渲染到我的DOM根中。

ReactDOM.render(
    React.createElement(
        NestedContentView,
        null,
        null
    ),
    document.getElementById('root')
);

问题

createInstance()会引发错误：

[createInstance()] Unknown type:
function MyCustomView() {
    var _this = _super !== null && _super.apply(this, arguments) || this;
    return _this;
}

child.type显然只是对MyCustomView类的引用；我曾期望React Reconciler在幕后做一些聪明的工作，以便将MyCustomView类分解成其核心Node，每个Node具有基本的DOM类型（"div"），但显然不是。 / p>

我应该如何创建自定义组件的实例（那些类型不在我的核心类型到工厂方法的映射中的实例）？