web-dev-qa-db-fra.com

Utilisation de ReactJS avec AngularJS

J'essaie d'utiliser ReactJS avec AngularJS mais cela ne fonctionne pas. Quelqu'un pourrait-il me dire comment les gélifier ensemble? Ou veuillez indiquer ce qui manque ici?

Mon index.html est le suivant:

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

Voici comment mon reactExample.js a été écrit:

/**
  * @jsx React.DOM
  */
var testMy = React.createClass({
    render: function(){
        return ( <p>Hello</p>)
    }
});

Et mon angularExample.js est le suivant:

var myapp = angular.module('MyApp',[]);
myapp.controller('Ctrl1',['$scope',function($scope){
    $scope.clickMe = function(){
        alert("Clicked!");
        React.renderComponent(testMy, elem[0]);
    }
}]);

Il n'affiche rien (autre que l'alerte). Je m'attends à voir "Bonjour" imprimé là-bas, mais cela génère l'erreur suivante dans la console:

Error: Invariant Violation: prepareEnvironmentForDOM(...): Target container is not a DOM element

Toute aide serait très appréciée.

angularjsreactjs
24
5122014009

@Simon Smith a déjà expliqué pourquoi l'erreur se produisait React.renderComponent, Attendez-vous à un deuxième argument, mais la façon dont vous jouez la manipulation DOM à l'intérieur du contrôleur n'est pas appropriée. Dans AngularJs la manipulation DOM doit être dans directive. Voyons comment cela pourrait être

De Facebook React vs AngularJS: A Closer Look blog

Les composants React sont beaucoup plus puissants que les modèles Angular; ils doivent plutôt être comparés aux directives d'Angular.

En bas de ce blog En utilisant React et AngularJS ensemble section, vous pouvez voir comment angular et react peut jouer ensemble.

De réagir site Web

Les composants React implémentent une méthode render () qui prend les données d'entrée et retourne quoi afficher.

Dans angularjs les composants sont rendus par directive

Voir ceci ( plunker où j'intègre angularjs et react.

Dans react-example.js, J'ai créé l'élément virtual dom

var Hello = React.createClass({
  render: function() {
    return React.DOM.div({}, 'Hello ' + this.props.name);
  }
});

Et la directive myMessage rend le virtual dom

React.renderComponent(Hello({name: scope.myModel.message}), document.getElementById('example'));

La propriété name de virtual dom Sera liée à scope.myModel.message

19
Reza

Pour utiliser React dans mon contrôleur, je fais cela

 myApp.controller(function($scope){
        $scope.myComponent = {};
        $scope.myComponent.setState({data: "something"});
    });

et dans mon composant React:

window.myComponent = React.createClass({
    getInitialState: function(){
        return {
           data:''
        }
    },
    componentWillMount: function(){
       var scope = this.props.scope;
           scope.myComponent = this;
    },
    render:func .....
});

J'utilise la directive ngReact de David Chang, qui transmet la portée $ en tant que propriété à un composant. Alors maintenant, vous pouvez appeler setState depuis votre contrôleur, forçant le composant react à restituer :)

J'ai un plus grand exemple de ci-dessus dans mon React-Sandbox

12
Marques Woodson

J'envisagerais de faire l'intégration via une directive car c'est souvent l'approche recommandée pour intégrer du code non angular avec angulaire.

Voici un exemple:

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]);
        }
    };
}]);

Plus d'informations ici: http://www.syntaxsuccess.com/viewarticle/547bbd04fa0710440b45e41c

9
TGH

Essayez plutôt d'utiliser ngReact angular angulaire plutôt que d'utiliser ReactJs directement. Cela permet également une intégration transparente avec angularJs. Consultez les exemples/exemples @ https://github.com/davidchang/ ngReact

2
Sri7

renderComponent attend un élément DOM comme deuxième argument pour injecter le composant. Il semble que c'est de cela que l'erreur se plaint.

2
Simon Smith