horizontal - Usando ReactJS con AngularJS
instalar chart js (5)
renderComponent espera un elemento DOM como segundo argumento para inyectar el componente. Parece que es de lo que se queja el error.
Estoy tratando de usar ReactJS con AngularJS pero no está funcionando. ¿Podría alguien por favor dirigirme sobre cómo unirlos? ¿O por favor señale qué me falta aquí?
Mi index.html es el siguiente:
<!DOCTYPE html>
<html data-ng-app="MyApp">
<head>
<title>My Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
</head>
<body data-ng-controller="Ctrl1">
<div id="myDiv">
<button id="btn1" data-ng-click="clickMe()">Click Me</button>
</div>
<script src="http://fb.me/react-0.8.0.js"></script>
<script src="http://fb.me/JSXTransformer-0.8.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
<script type="text/jsx" src="reactExample.js"></script>
<script src="angularExample.js"></script>
</body>
</html>
Así es como se ha escrito mi reactExample.js:
/**
* @jsx React.DOM
*/
var testMy = React.createClass({
render: function(){
return ( <p>Hello</p>)
}
});
Y mi angularExample.js es el siguiente:
var myapp = angular.module(''MyApp'',[]);
myapp.controller(''Ctrl1'',[''$scope'',function($scope){
$scope.clickMe = function(){
alert("Clicked!");
React.renderComponent(testMy, elem[0]);
}
}]);
No muestra nada (que no sea la alerta). Espero ver ''Hola'' impreso allí pero arroja el siguiente error en la consola:
Error: Invariant Violation: prepareEnvironmentForDOM(...): Target container is not a DOM element
Cualquier ayuda sería muy apreciada.
Ya @Simon Smith mencionó por qué el error occury React.renderComponent espera un segundo argumento, pero la forma en que usted juega la manipulación DOM dentro del controlador no es apropiada. En AngularJs manipulación del DOM debe estar en la directive . Veamos cómo podría ser
De React vs AngularJS de Facebook: un blog más cercano
Los componentes React son mucho más poderosos que las plantillas Angulares; deberían ser comparados con las directivas de Angular.
Abajo de este blog Usando React y AngularJS juntos podemos ver cómo angular y react pueden jugar juntos.
Desde el sitio web de reaccionar
Los componentes React implementan un método render () que toma datos de entrada y devuelve qué mostrar.
En angularjs componentes se representan por directive
Ver este plunker donde integro angularjs y react .
En react-example.js creo virtual dom elemento virtual dom
var Hello = React.createClass({
render: function() {
return React.DOM.div({}, ''Hello '' + this.props.name);
}
});
Y la directiva myMessage renderiza la virtual dom
React.renderComponent(Hello({name: scope.myModel.message}), document.getElementById(''example''));
Donde virtual dom propiedad de name virtual dom se vinculará con scope.myModel.message
Para usar Reaccionar en mi controlador, hago esto
myApp.controller(function($scope){
$scope.myComponent = {};
$scope.myComponent.setState({data: "something"});
});
y en mi componente React:
window.myComponent = React.createClass({
getInitialState: function(){
return {
data:''''
}
},
componentWillMount: function(){
var scope = this.props.scope;
scope.myComponent = this;
},
render:func .....
});
Estoy usando la directiva ngReact de David Chang, que transfiere $ scope como propiedad a un componente. Entonces ahora puede llamar a setState desde su controlador, forzando al componente de reacción a volver a renderizar :)
Tengo un ejemplo más grande de arriba en mi React-Sandbox
Consideraría hacer la integración a través de una directiva, ya que a menudo es el enfoque recomendado para integrar código no angular con angular.
Aquí hay un ejemplo:
angular.module(''app'').directive(''greeting'',[function(){
return {
restrict:''AE'',
scope:{name:''@''},
link: function (scope, elem, attrs){
var GreetingSection = React.createClass({displayName: ''Greeting'',
render: function() {
var message = "Good morning " + this.props.data.name + ", how are you?";
return React.createElement(''div'', {className: "greeting"},message);
}
});
React.renderComponent(GreetingSection({data:scope}), elem[0]);
}
};
}]);
Más información aquí: http://www.syntaxsuccess.com/viewarticle/547bbd04fa0710440b45e41c
En su lugar, intente utilizar el módulo angular ngReact en lugar de usar ReactJs directamente. Esto proporciona una integración perfecta con angularJs también. Verifique las muestras / ejemplos @ https://github.com/davidchang/ngReact