Question

我正在尝试使用React渲染来实现替换Angular ng-repeat的“快速重复”模式。我可以渲染一个基本表，但该表需要支持自定义Angular指令。我可以在React（作为属性）中获取自定义指令，但它们不起作用。基于谷歌先生，这应该是可能的，但在我看来，或许我需要在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>

Answer 1

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

{{1}}

在React

1 个答案: