Компонент CXJS как дочерний для нативного компонента реакции

Question

Я смешал много функциональных компонентов в cxjs с простыми компонентами реакции.

но иногда, когда я пытаюсь использовать cxjs-компонент как дочерний компонент реагировать, я получаю

"
error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.
"

Как я могу решить это?

Спасибо вам большое!

Code which causes this problem:

CXJS component example, which works within cxjs as a child but causes error in react as a child:
import { Chart, Gridlines, NumericAxis } from 'cx/charts';
import { Rectangle, Svg } from 'cx/svg';
import {Controller} from "cx/ui";

export  class Dcc extends Controller {
 onInit(){
     alert("Demochart initialised");
 }
}

    export default <cx>
    <div class="widgets" controller = {Dcc}>
        tiomo test
        <Svg style="width:300px;height:200px" margin="10 20 30 50">
            <Chart axes={{
                x: <NumericAxis />,
                y: <NumericAxis vertical/>
            }}>
                <Rectangle fill="white" />
                <Gridlines />
            </Chart>
        </Svg>
        timo
    </div>
</cx>

и теперь компонент реагирующей сетки, чтобы использовать его с: - я могу добавлять реагирующие дочерние элементы так, как мне нравится. но не cxjs, как указано выше.

import React from 'react';
import { VDOM } from "cx-react";
import { findDOMNode } from "react-dom";
import GridLayout from 'react-grid-layout';
import "./index.scss";



import Demochart from "../../demochart";

export default class MyGrid extends React.Component {


    render() {



        return (


            <GridLayout className="layout" cols={12} rowHeight={30} width={1200}>

                <div key="g" data-grid={{x: 14, y: 5, w: 6, h: 6}}><Demochart/></div>


            </GridLayout>

        )
    }

}

Answer 1

Cx Оболочка необходима для использования виджетов CxJS внутри компонентов React.

<MyReactComponent>
  <Cx store={myCxStore} subscribe>
     <Grid ... />
  </Cx>
</MyReactComponent>

Компоненты CxJS не могут работать без хранилища, поэтому вы должны передать его.

Чаще всего использовать компоненты React внутри CxJS.

<cx>
  <div>
    <MyReactComponent />
  </div>
</cx>