如何在AngularJs和ngReact中使用react 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中捆綁在一起的庫中的類，我以前在風暴創建該類反應庫模塊。

<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})。