如何使用AngularJs和ngReact使用render

Question

我试图在angularJs应用程序中使用StormReact库。

在下面的代码中，我在库中创建了类，它使用webpack作为单个bundle.js捆绑在一起。

window.HelloStormReact =  React.createClass({

render: function() {

var Engine = require("../src/Engine")();

var model = {links:[],nodes: []};

function generateSet(model,offsetX,offsetY){

                    var node1 = Engine.UID();
    var node2 = Engine.UID();
    var node3 = Engine.UID();
    var node4 = Engine.UID();
    var node5 = Engine.UID();


    model.links = model.links.concat([
        {
            id: Engine.UID(),
            source: node1,
            sourcePort: 'out',
            target: node2,
            targetPort: 'in',
        },
        {
            id: Engine.UID(),
            source: node1,
            sourcePort: 'out',
            target: node3,
            targetPort: 'in'
        },
        {
            id: Engine.UID(),
            source: node2,
            sourcePort: 'out',
            target: node4,
            targetPort: 'in'
        },
        {
            id: Engine.UID(),
            source: node4,
            sourcePort: 'out',
            target: node5,
            targetPort: 'in2'
        },
        {
            id: Engine.UID(),
            source: node2,
            sourcePort: 'out',
            target: node5,
            targetPort: 'in'
        }
    ]);

    model.nodes = model.nodes.concat([
    {
            id:node1,
            type: 'action',
            data: {
                name: "Create User",
                outVariables: ['out']
            },
            x:50 + offsetX,
            y:50 + offsetY
        },
        {
            id:node2,
            type: 'action',
            data: {
                name: "Add Card to User",
                inVariables: ['in','in 2'],
                outVariables: ['out']
            },
            x:250 +offsetX,
            y:50 + offsetY
        },
        {
            id:node3,
            type: 'action',
            data: {
                color: 'rgb(0,192,255)',
                name: "Remove User",
                inVariables: ['in']
            },
            x:250 + offsetX,
            y:150 + offsetY
        },
        {
            id:node4,
            type: 'action',
            data: {
                color: 'rgb(0,192,255)',
                name: "Remove User",
                inVariables: ['in'],
                outVariables: ['out']
            },
            x:500 + offsetX,
            y:150 + offsetY
        },
        {
            id:node5,
            type: 'action',
            data: {
                color: 'rgb(192,255,0)',
                name: "Complex Action 2",
                inVariables: ['in','in2','in3']
            },
            x:800 + offsetX,
            y:100 + offsetY
        },
    ]);
                }

generateSet(model,0,0);

Engine.registerNodeFactory({
    type:'action',
    generateModel: function(model){
        return React.createElement(BasicNodeWidget,{
            removeAction: function(){
                Engine.removeNode(model);
            },
            color: model.data.color,
            node: model,
            name: model.data.name,
            inPorts: model.data.inVariables,
            outPorts: model.data.outVariables
        });
    }
});

Engine.loadModel(model);

return ReactDOM.render(React.createElement(Canvas,{engine: Engine}), document.getElementById("howdy"));;
}
});

在index.html中，我使用了在Storm库模块中创建的类。

 <div class="content">
   <react-component name="HelloStormReact" />
   <div class="storm-flow-canvas" id="howdy">
   </div>
</div>

我收到错误了

    Constructor.render(): A valid React element (or null) must be returned. 
   You may have returned undefined, an array or some other invalid object.

帮助我编写正确的呈现对象以返回。

Answer 1

因为HelloStormReact只是一个组件，所以在它的render函数中，您不需要再次呈现它，只需在render函数中返回React.createElement(Canvas,{engine: Engine})。