web-dev-qa-db-ja.com

AngularJSでReactJSを使用する

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

どんな助けでも大歓迎です。

angularjsreactjs
24
5122014009

すでに@Simon Smithが、エラーが発生する理由React.renderComponent 2番目の引数が必要ですが、コントローラー内でDOM操作を行う方法は適切ではありません。 AngularJsでは、DOM操作はdirectiveで行う必要があります。それがどうなるか見てみましょう

FacebookのReact vs AngularJS：A Closer Look ブログから

Reactコンポーネントは、Angularテンプレートよりもはるかに強力です。代わりに、Angularのディレクティブと比較する必要があります。

このブログの最後ReactとAngularJSを一緒に使用するセクションでは、angularとreactは一緒にプレイできます。

From react website

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'));

どこ virtual domのnameプロパティはscope.myModel.message

19
Reza

コントローラーで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 に上記のより大きな例があります

12
Marques Woodson

ディレクティブを介した統合を検討することを検討します。これは、non angular codeとangleを統合するための推奨されるアプローチであることが多いためです。

以下に例を示します。

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

9
TGH

代わりに、ReactJsを直接使用するのではなく、ngReact angularモジュールを使用してみてください。これにより、angularJsとのシームレスな統合も実現します。samples/ examples @ https://github.com/davidchang/ ngReact

2
Sri7

renderComponentは、コンポーネントを注入するための2番目の引数としてDOM要素を想定しています。それがエラーが不平を言っていることのようです。

2
Simon Smith