Question

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

Answer 1

你不能在js文件中定义渲染函数，它应该在jsx文件中。您不能只是开始将其他语言的代码添加到您的js文件中我建议您阅读本文Facebook's React vs AngularJS: A Closer Look

我们正在对项目使用bower-react。代码看起来应该与此类似

您的指示：

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

正如您所看到的，Angular只调用renderComponent函数并发送参数或回调。如果模型发生变化，您也应该从Angular中调用tableComponent .setState(newData)

您的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));

如何在Angular Directive

1 个答案: