时间戳

首页 > 解决方案 > CXJS 组件作为本机反应组件的子级

reactjs - CXJS 组件作为本机反应组件的子级

问题描述

我将 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>

现在是一个反应网格组件，可以与它一起使用： - 我可以随心所欲地添加反应子级。但没有像上面那样的 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>

        )
    }

}

标签： reactjsparent-childcxjs

解决方案

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

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

CxJS 组件不能在没有 store 的情况下工作，所以你必须通过一个。

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

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

推荐阅读