Как использовать React JSX внутри угловой директивы

Question

Как использовать React JSX внутри угловой директивы

0

Я получаю сообщение об ошибке неожиданного токена, где начинается jsx. Как использовать встроенный контроллер JSX? Мне нужно каким-то образом изменить атрибут файла?

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

andrey 05 июль 2015, в 12:00

Источник

Теги:

reactjs

angularjs

react-jsx

1 ответ

Ещё вопросы

Matias Fernandez Martinez · Accepted Answer · 2015-07-10T16-29-00.000Z

вы не можете определить функцию рендеринга внутри js файла, который должен находиться в файле jsx. Вы не можете просто начать добавлять код с другого языка в файлы js. Я рекомендую вам прочитать эту статью. Facebook React vs AngularJS: более внимательный взгляд

Мы используем bower-react на наш проект. И код должен выглядеть примерно так

Ваша директива:

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

Как вы видите, Angular вызывает функцию renderComponent и renderComponent параметры или обратные вызовы. Если изменения модели вы должны вызвать tableComponent.setState(newData) из Angular, а также

Ваш jsx файл:

/** @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));