26

AngularJS で ReactJS を使用しようとしていますが、うまくいきません。それらを一緒にゲル化する方法を教えてください。または、ここで何が欠けているかを指摘してください。

私の 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

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

4

5 に答える 5

20

すでに @Simon Smith は、React.renderComponent2 番目の引数を期待してエラーが発生する理由について言及しましたが、コントローラー内で DOM 操作を実行する方法は適切ではありません。In AngularJsDOM 操作は にある必要がありdirectiveます。それがどのようになるか見てみましょう

Facebook のReact vs AngularJS: A Closer Lookブログより

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

このブログの下部にある「React と AngularJS を一緒に使用する」セクションでは、どのように一緒にプレイできるかangularを確認できます。react

反応のウェブサイトから

React コンポーネントは、入力データを受け取り、何を表示するかを返す render() メソッドを実装します。

Inangularjsコンポーネントはによってレンダリングされますdirective

と を統合したこのプランカーを参照してください。angularjsreact

要素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

于 2014-01-06T18:11:57.533 に答える
12

コントローラーで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 .....
});

$scope をプロパティとしてコンポーネントに渡す David ChangのngReactディレクティブを使用しています。これで、コントローラーから setState を呼び出して、react コンポーネントを強制的に再レン​​ダリングできるようになりました :)

私のReact-Sandboxには上記のより大きな例があります

于 2014-03-01T18:42:26.890 に答える
9

ディレクティブを介して統合を行うことを検討します。これは、角度のないコードを角度と統合するための推奨されるアプローチであることが多いためです。

次に例を示します。

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

于 2015-02-05T15:35:20.850 に答える
2

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

于 2014-01-06T16:54:17.077 に答える