angularjs - 将 ReactJS 与 AngularJS 一起使用

Question

我正在尝试将 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>

这是我的 reactExample.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

任何帮助将非常感激。

score 20 · Accepted Answer

@Simon Smith 已经提到了为什么错误发生需要React.renderComponent第二个参数，但是你在控制器中玩 DOM 操作的方式是不合适的。在AngularJsDOM 操作中应该在directive. 让我们看看它会如何

来自Facebook 的 React vs AngularJS: A Closer Look博客

React 组件比 Angular 模板强大得多；它们应该与 Angular 的指令进行比较。

在这篇博客的底部同时使用 React 和 AngularJS部分，您可以看到如何angular以及react可以一起玩。

来自反应网站

React 组件实现了一个 render() 方法，该方法接受输入数据并返回要显示的内容。

在angularjs组件中由directive

请参阅我集成的这个plunkerangularjs和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'));

Wherevirtual dom的name属性将与scope.myModel.message

score 12 · Accepted Answer

要在我的控制器中使用 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 .....
});

我正在使用 David Chang 的ngReact指令，它将 $scope 作为属性传递给组件。所以现在你可以从你的控制器调用 setState ，强制 react 组件重新渲染:)

我的React-Sandbox中有一个更大的示例

score 9 · Accepted Answer

我会考虑通过指令进行集成，因为这通常是将非角度代码与角度集成的推荐方法。

这是一个例子：

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

更多信息在这里（链接失效；指向archive.org副本）：
http ://www.syntaxsuccess.com/viewarticle/547bbd04fa0710440b45e41c

score 3 · Accepted Answer

而是尝试使用 ngReact 角度模块，而不是直接使用 ReactJs。这也提供了与 angularJs 的无缝集成。检查示例/示例@ https://github.com/davidchang/ngReact

score 2 · Accepted Answer

renderComponent期望 DOM 元素作为第二个参数来注入组件。似乎这就是错误所抱怨的。

angularjs - 将 ReactJS 与 AngularJS 一起使用

5 回答 5

Related

Reference