Компоненты React внутри приложения Angular 1.4
У меня есть приложение angular, созданное с использованием gulp. Я хочу использовать компоненты React внутри него для разных функций. Приложение Angular загружает js через теги сценария, а приложение React имеет собственные контейнеры для хранения и т. д. И использует React 16.
Как я могу импортировать свои компоненты и т. д. В angular.
Ответы 2
Можно использовать любой существующий адаптер AngularJS / React, например react2angular.
Все эти адаптеры делают: ReactDOM.render в хуке $onInit и ReactDOM.unmountComponentAtNode в $onDestroy.
Спасибо за комментарий против. В качестве примера реализации я указал react2angular, github.com/coatue-oss/react2angular/blob/master/index.tsx. В случае, если это не подходит пользователю (OP вынужден использовать 1.4, но другие программы просмотра не могут), пользователь может использовать тот же подход для пользовательской реализации. И, кстати, component можно полифилить в 1.4 с помощью github.com/toddmotto/angular-component
Вы можете использовать React Component с Angular Directive или использовать внутри
$onInit в angular
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]
);
})
}
}
})
Не думайте, что он работает с Angular 1.4, поскольку он полагается на метод
.component, который недоступен в Angular 1.4.