CXJS组件作为本机反应组件的子组件

Question

我将cxjs中的许多功能组件与普通的react组件混合在一起。

但是，有时当我尝试使用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>

现在有一个react网格组件来使用它：-我可以随心所欲地添加react子元素。但是没有像上面这样的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

为了在React组件中使用Cx小部件，需要使用CxJS包装器。

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

CxJS组件不能在没有存储区的情况下工作，因此必须传递一个。

在CxJS中使用React组件更常见。

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