如何使用 AngularJs 和 ngReact 的反应渲染

Question

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

在下面的代码中，我在库中创建了 class，它使用 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反应库模块中创建的class。

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

帮我写正确的渲染对象到return。

Answer 1

由于HelloStormReact只是一个组件，在其render函数中，不需要再次渲染，只需return React.createElement(Canvas,{engine: Engine})中的render函数。

如何使用 AngularJs 和 ngReact 的反应渲染

How to use react render with AngularJs and ngReact

angularjs

reactjs

ngreact