CXJS组件作为本机react组件的子组件

时间:2018-10-24 12:50:58

标签: reactjs parent-child cxjs

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

但是有时当我尝试使用cxjs-component作为react组件的子代时,我得到

super

我该如何解决?

非常感谢您!

"
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.
"

,现在是一个可与它一起使用的react网格组件:-我可以添加我喜欢的任意子对象。但是没有像上面这样的cxjs。

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>

1 个答案:

答案 0 :(得分:1)

Cx包装是必需的,以便在React组件中使用CxJS小部件。

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

如果没有商店,CxJS组件将无法工作,因此您必须传递一个。

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

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