首页 > 解决方案 > Angular 1.4 应用程序中的 React 组件

问题描述

我有一个使用 gulp 构建的 Angular 应用程序。我想在其中使用 React 组件来实现不同的功能。Angular 应用程序通过脚本标签加载 js,React 应用程序有自己的存储容器等,并且正在使用 React 16。

如何在 angular.js 中导入我的组件等。

标签: angularjsreactjs

解决方案


您可以React Component与 Angular 一起使用,也可以在Directive内部使用它 $onInitangular

var HelloWorld = React.createClass({
    displayName:'Hello World',
    render:function(){
        return React.DOM.div(Test, "Hello, ",this.props.value1);
    }
});

$scope.name = 'World!';

app.directive('hello', function(){
    return {
        restrict:'E',
        scope:{
            name:'='
        },
        link:function(scope, el, attrs){
            scope.$watch('name', function(newValue, oldValue){
                var MyComponent = React.createFactory(HelloWorld);
                ReactDOM.render(
                    MyComponent({value1:newValue}),
                    el[0]
                );
            })
        }
    }
})

推荐阅读