如何将你的AngularJS1.x应用迁移至React的方法

2023-09-16 23:36:05 40

Angular和React都是伟大的框架/库。Angular提供了MVC（模型、视图、控制器）的定义结构。React提供基于状态变化的轻量级呈现机制。通常情况下，开发者在AngularJS上有一个旧的应用程序后，他们会想用ReactJS建立新的特性。

虽然将AngularJS应用移除，从头开始建立一个ReactJS应用是不错的选择。但对于大规模应用来说，它不是一个可行的解决方案。在这种情况下，单独建立一个React组件并将其导入Augular会更容易。

在这篇文章中，我将帮你在Angular应用中使用react2angular创建一个React组件。

目标和计划

这里就是我们将要做的事情——

给定:一个用来展示城市名称和它的著名景点的Angular应用。

目标:给该Angular应用添加一个React组件。React的组件将会显示一张特征化的景点照片。

计划:我们将创建一个React组件，通过图片Url来传递，并将图像作为一个React组件来显示。

让我们开始吧！

第0步：拥有一个Angular应用

为实现本文的目的，请保持Angular应用的简单性。我计划在2018年进行欧洲之旅，因此我的Angular应用实质上是一个我想访问的目的地清单。

以下是数据集bucketlist看起来的样子：

constbucketlist=[{
city:'Venice',
position:3,
sites:['GrandCanal','BridgeofSighs','PiazzaSanMarco'],
img:'https://unsplash.com/photos/ryC3SVUeRgY',
},{
city:'Paris',
position:2,
sites:['EiffelTower','TheLouvre','Notre-DamedeParis'],
img:'https://unsplash.com/photos/R5scocnOOdM',
},{
city:'Santorini',
position:1,
sites:['Imerovigli','Akrotiri','SantoriniArtsFactory'],
img:'https://unsplash.com/photos/hmXtDtmM5r0',
}];

这是angularComponent.js的样子：

functionAngularComponentCtrl(){
varctrl=this;
ctrl.bucketlist=bucketlist;
};
angular.module('demoApp').component('angularComponent',{
templateUrl:'angularComponent.html',
controller:AngularComponentCtrl
});

这是angularComponent.html：


{{item.city}}
Iwanttosee{{sight}}

超简单！现在可以去圣托里尼了...

第1步：安装依赖关系

如果你的编辑器没有配置，那么从Angular迁移到React可能会很痛苦。我们将首先安装linting。

npminstall--saveeslintbabel-eslint

接下来，安装react2angular。如果你从未安装过React，你还将需要安装react，react-dom和prop-types。

npminstall--savereact2angularreactreact-domprop-types

第2步：创建一个React组件

现在，我们已经有了一个Angular组件用来呈现城市的名称。接下来，我们需要渲染特色图像。假设这个图片是通过props提供给我们的。我们的React组件如下所示：

import{Component}from'react';
classRenderImageextendsComponent{
render(){
constimageUrl=this.props.imageUrl;
return(



);
}
}

第3步：传递props属性

请记住，在第2步中，假设有一个通过props获取的可用图像。我们现在要填充props值。你可以使用props将依赖关系传递给React组件。请务必注意，React组件没有任何Angular依赖关系可用。你可以这样想- React组件就像一个连接到Angular应用的容器。如果你需要容器继承父母的信息，你将需要通过props明确地接入。

所以，为了传递依赖关系，我们将在Angular中添加一个renderImage组件，并将其作为参数传递给imageUrl：

angular.module('demoApp',[])
.component('renderImage',react2angular(RenderImage,['imageUrl']));

第4步：导入Angular模板

现在，你可以像任何其他组件一样简单地将这个组件导入到Angular应用中：


{{item.city}}
Iwanttosee{{site}}

TaDa！不敢相信，这简直就是魔法。当然，这（更多的）是艰苦的工作和汗水，还有陪伴我们的咖啡，等等。

现在就去构建一些React组件吧，勇士!

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

如何将你的AngularJS1.x应用迁移至React的方法

{{item.city}}

{{item.city}}

热门推荐

随机推荐