如何在Angular Directive中使用React JSX

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文件中定义render函数，而应该在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函数并发送参数或回调。 如果模型发生变化，您也应该从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));