在 React 中使用自定义 Angular 指令答案

【问题标题】：Use custom Angular directive from within React在 React 中使用自定义 Angular 指令
【发布时间】：2015-10-06 09:23:58
【问题描述】：

我正在尝试实现用 React 渲染替换 Angular ng-repeat 的“快速重复”模式。我可以渲染一个基本表格，但该表格需要支持自定义 Angular 指令。我可以获取自定义指令以在 React 中呈现（作为属性），但它们不起作用。根据 Google 先生，这应该是可能的，但在我看来，也许我需要对包含我的自定义指令的 React 呈现的 HTML 进行 $compile ......或者不需要。

这是我的精简测试代码。 'react-test' 指令似乎正确呈现了 ReactClass 组件，其中包括一个 'ng-monkey' 属性，该属性本身就是一个 Angular 自定义指令。猴子似乎不起作用。有什么建议吗？

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Angular React Test</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1.0" name="viewport" />
</head>
<body ng-app="AngularReactTest" ng-controller="TestController">

    <react-test monkey></react-test>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js">    </script>
    <script src="https://fb.me/react-0.13.3.js"></script>

    <script>
        var ReactClass = React.createClass({
            displayName: 'ReactClass',
            render: function () {
                return (
                    React.DOM.div({ 'data-ng-monkey': '' }, null)
                )
            }
        });

        angular
            .module('AngularReactTest', [])
            .controller('TestController', [function () {
            }])
            .directive('reactTest', function () {
                return {
                    restrict: 'E',                   
                    link: function (scope, el, attrs) {
                        var test = React.createElement(ReactClass, null, null);
                        React.render(test, el[0], null);
                    }
                }
            })
            .directive('ngMonkey', function () {
                return {
                    restrict: 'A',
                    link: function (scope, el, attrs) {
                        alert('In ngMonkey link function...making my head hurt...');
                    },
                }
            });
    </script>
</body>
</html>

这是渲染结果：

<ReactTest>
    <div data-ng-monkey></div>
</ReactTest>

【问题讨论】：

您找到解决方案了吗？我也面临同样的问题。
很遗憾没有。我们很快发现我们的性能问题不是 ng-repeat 的本质，而是 IE 和 Angular Material Design 库的问题。所以我们放弃了 Angular Material Design。抱歉，希望您能找到解决办法。

标签： angularjs reactjs angular-directive

【解决方案1】：

我知道这是个老话题，但我认为这个解决方案可以帮助某人

React.createClass({
                compileDirective: function () {
                    $compile(this.refs.monkey)($scope);
                },
                componentDidMount: function () {
                    this.compileDirective();
                },
                componentDidUpdate: function () {
                    this.compileDirective();
                },
                render: function () {
                    return (
                        <div>
                            <monkey ref="monkey"></monkey>
                        </div>
                    );
                }
            });

【讨论】：