How to use the cx/ui.VDOM.Component function in cx

explore(context, instance) {
		if (instance.state.active) super.explore(context, instance);
	}

	render(context, instance, key) {
		return (
			
				{instance.state.active && this.renderChildren(context, instance)}
			
		);
	}
}

OnScreenLoader.prototype.styled = true;

class OnScreen extends VDOM.Component {
	render() {
		if (!this.elRef)
			this.elRef = el => {
				this.el = el;
			};

		let { children, data } = this.props;
		return (
			<div style="{data.style}">
				{children}
			</div>
		);
	}

	componentDidMount() {
		if (window.IntersectionObserver) {

declareData() {
        super.declareData(...arguments, {
            task: undefined,
            styleRules: undefined,
            autoFocus: undefined,
            isNew: undefined
        })
    }

    render(context, instance, key) {
        return 
    }
}


class TaskCmp extends VDOM.Component {

    constructor(props) {
        super(props);

        this.state = {
            edit: props.data.isNew,
            scrollHeight: null
        };

        this.dom = {};
    }

    render() {
        let { instance, data } = this.props;
        let { widget } = instance;
        let { CSS } = widget;

}
}

GridLayout.prototype.baseClass = "gridlayout";
GridLayout.prototype.styled = true;

function createRef(scope, name) {
    return (
        scope[`${name}Ref`] ||
        (scope[`${name}Ref`] = function (el) {
            scope[name] = el;
        })
    );
}

class Grid extends VDOM.Component {
    render() {
        let {data, instance, children} = this.props;
        let {CSS, baseClass} = instance.widget;

        return (
            <div style="{data.style}">
                <div></div></div>