如何在 Angular 指令中使用 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 文件中定义渲染函数它应该在 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 指令中使用 React JSX

How to use React JSX inside Angular Directive

angularjs

reactjs

react-jsx