How to use React JSX inside Angular Directive

Question

I get an error of unexpected token right where jsx begins. How to use JSX inside directive controller? Do I need to change attribute of a file somehow?

controller: function($scope, $t){

            var Table = FixedDataTable.Table;
            var Column = FixedDataTable.Column;



            React.render(
                <Table
                    rowHeight={50}
                    rowGetter={rowGetter}
                    rowsCount={rows.length}
                    width={5000}
                    height={5000}
                    headerHeight={50}>
                    <Column
                        label="Col 1"
                        width={3000}
                        dataKey={0}
                        />
                    <Column
                        label="Col 2"
                        width={500}
                        dataKey={1}
                        />

                </Table>,

                document.getElementById('table')
            );

Matias Fernandez Martinez · Accepted Answer · 2015-07-10 18:59:49Z

you can't define the render function inside the js file it should be in a jsx file. You can't just start adding code from other language into your js files i recommend you to read this article Facebook's React vs AngularJS: A Closer Look

We are using bower-react to our project. And the code should look something similar to this

Your directive:

link: function(scope, element) {
  var tableComponent = React.renderComponent(
          react.table({
            myParam: myValue
          }),
          element.find('#table').get(0)
        );
}

As you can see Angular is only calling the renderComponent function and sending parameters or callbacks. If the model changes you should call tableComponent .setState(newData) from Angular as well

Your jsx file:

/** @jsx React.DOM */
(function(react) {
  'use strict';
    // Vars
    // Functions
    react.table = React.createClass({
      render: function() {
        return(
           <Table 
                  myParam={this.props.myParam}
                  rowHeight={50}
                  rowGetter={rowGetter}
                  rowsCount={rows.length}
                  width={5000}
                  height={5000}
                  headerHeight={50}>
                  <Column
                      label="Col 1"
                      width={3000}
                      dataKey={0}
                      />
                  <Column
                      label="Col 2"
                      width={500}
                      dataKey={1}
                      />
                </Table>
        );
      }
    });
}(react));

Collectives™ on Stack Overflow

How to use React JSX inside Angular Directive

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related