Использование ReactJS с AngularJS

Я пытаюсь использовать ReactJS с AngularJS, но он не работает. Может ли кто-нибудь направить меня на то, как сжечь их вместе? Или, пожалуйста, укажите, что здесь отсутствует?

Мой index.html выглядит следующим образом:

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

Вот как написано мое responseExample.js:

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

И мой angularExample.js выглядит следующим образом:

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

Он ничего не отображает (кроме предупреждения). Я ожидаю увидеть "Hello", напечатанный там, но он вызывает следующую ошибку в консоли:

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

Любая помощь будет высоко оценена.

Ответы

Ответ 1

Уже @Simon Smith упомянул, почему ошибка occour React.renderComponent ожидает второй аргумент, но способ воспроизведения DOM-манипуляции внутри контроллера не подходит. В AngularJs DOM-манипуляция должна быть в directive. Давайте посмотрим, как это может быть

Из Facebook React vs AngularJS: более внимательный взгляд

Реагирующие компоненты намного мощнее, чем Angular шаблоны; их следует сравнивать с директивами Angular.

Внизу этого блога Используя раздел React и AngularJS, вы можете видеть, как angular и react могут играть вместе.

От веб-сайта отреагировать

Реагирующие компоненты реализуют метод render(), который принимает входные данные и возвращает отображаемые данные.

В AngularJs компоненты отображаются directive

Смотрите plunker, где я интегрирую AngularJs и react.

В react-example.js создайте элемент virtual dom

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

И директива myMessage визуализирует virtual dom

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

Где свойство virtual dom name будет связываться с scope.myModel.message

Ответ 2

Чтобы использовать React в моем контроллере, я делаю это

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

и в моей компоненте React:

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

Я использую директиву ngReact от Дэвида Чанга, которая передает $scope как свойство в компонент. Итак, теперь вы можете вызывать setState из вашего контроллера, заставляя реагирующий компонент повторно рисовать:)

У меня есть более высокий пример выше в React-Sandbox

Ответ 3

Я бы рассмотрел возможность интеграции с помощью директивы, поскольку это часто рекомендуемый подход для интеграции кода angular angular.

Вот пример:

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

Подробнее здесь: http://www.syntaxsuccess.com/viewarticle/547bbd04fa0710440b45e41c

Ответ 4

renderComponent ожидает, что элемент DOM будет вторым аргументом для ввода компонента. Похоже, это то, о чем жалуется ошибка.

Ответ 5

Вместо этого попробуйте использовать модуль ngReact angular, а не напрямую использовать ReactJs. Это обеспечивает плавную интеграцию с angularJs. Проверьте образцы/примеры @https://github.com/davidchang/ngReact