Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

reactjs and angularjs #3986

Closed
a-elnajjar opened this issue May 29, 2015 · 2 comments
Closed

reactjs and angularjs #3986

a-elnajjar opened this issue May 29, 2015 · 2 comments

Comments

@a-elnajjar
Copy link

I have Problem using reactJS in angularJS app my problem I have this error. we I don't know what is

Warning: Something is calling a React component directly. Use a
factory or JSX instead. :
11607 TypeError: Cannot read property '__reactAutoBindMap'
of undefined
at Constructor (react-0.13.1.js:5816)
at Object.fn (ReceptionController.js:250)
at Scope.$digest (angular.js:14243)
at Scope.$apply (angular.js:14506)
at done (angular.js:9659)
at completeRequest (angular.js:9849)
at XMLHttpRequest.requestLoaded (angular.js:9790)(anonymous function) @ angular.js:11607

ReceptionReactController
/** @jsx React.DOM*/
(function () {
    'use strict';

    var app = angular.module('dionysus');

    var ReceptionReactController = function ($scope) {


    };

    app.controller('ReceptionReactController', ['$scope', ReceptionReactController]).directive('fastNg', function(){
        return {
            restrict: 'E',
            scope: {
                framework: '='
            },
            link: function (scope, el, attrs) {
                scope.$watch('framework', function (newValue, oldValue) {
                    React.render(
                      MYCOMPONENT({ framework: newValue }),
                      el[0]
                    );
                })
            }
        }
    });

}());

MYCOMPONENT.js

var MYCOMPONENT = React.createClass({
    displayName: 'MYCOMPONENT',
    render: function () {
        return React.DOM.div(null, "Rendering faster in AngularJs with ", this.props.framework);

    }
});

view

    <div>
        <h1>Faster Rendering With ReactJs</h1>
        <input ng-model="framework"/>
        <hr>
        <fast-ng framework="framework"></fast-ng>
    </div>
@MattKunze
Copy link

You need to use createFactory if you're not using JSX to generate components. IE:

var MYCOMPONENT = React.createFactory( React.createClass({
...

We use CoffeeScript instead of JSX and have to go through the same when defining/importing components

@sophiebits
Copy link
Collaborator

Please post support questions somewhere else, such as Stack Overflow, in the future.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants