角和反应都是伟大的框架/库.Angular提供了MVC(模型,视图,控制器)的定义结构.React提供基于状态变化的轻量级呈现机制。通常情况下,开发者在AngularJS上有一个旧的应用程序后,他们会想用ReactJS建立新的特性。
虽然将AngularJS应用移除,从头开始建立一个ReactJS应用是不错的选择。但对于大规模应用来说,它不是一个可行的解决方案。在这种情况下,单独建立一个反应组件并将其导入Augular会更容易。
在这篇文章中,我将帮你在角应用中使用react2angular创建一个反应组件。
<强>目标和计划
这里就是我们将要做的事情,
给定:一个用来展示城市名称和它的著名景点的角应用。
目标:给该角应用添加一个反应组件.React的组件将会显示一张特征化的景点照片。
计划:我们将创建一个反应组件,通过图片Url来传递,并将图像作为一个反应组件来显示。
让我们开始吧!
<强>第0步:拥有一个角应用
为实现本文的目的,请保持角应用的简单性。我计划在2018年进行欧洲之旅,因此我的角应用实质上是一个我想访问的目的地清单。
以下是数据集bucketlist看起来的样子:
const bucketlist=[{
城市:“威尼斯”,
位置:3,
网站:[“大运河”、“叹息桥”,“圣马可广场”),
img:“https://unsplash.com/photos/ryC3SVUeRgY”,
}, {
城市:“巴黎”,
位置:2
网站:【埃菲尔铁塔,卢浮宫,巴黎圣母院的),
img:“https://unsplash.com/photos/R5scocnOOdM”,
}, {
城市:圣托里尼岛,
位置:1、
网站:[‘Imerovigli’,‘Akrotiri’,‘圣托里尼岛艺术工厂),
img:“https://unsplash.com/photos/hmXtDtmM5r0”,
});
之前
这是angularComponent。js的样子:
函数AngularComponentCtrl () {
var ctrl=;
ctrl。bucketlist=bucketlist;
};
angular.module (demoApp) .component (angularComponent, {
templateUrl:“angularComponent.html”,
控制器:AngularComponentCtrl
});
之前
这是angularComponent.html:
& lt; div ng-repeat="项ctrl美元。bucketlist item.position“ng-sort=比;
& lt; h3> {{item.city}} & lt;/h3>
& lt; p>我想看看& lt;跨越ng-repeat=癷tem.sights视线”在{{视觉}}& lt;/p> & lt;/span>
& lt;/div>
之前
超简单!现在可以去圣托里尼了…
<强>第1步:安装依赖关系
如果你的编辑器没有配置,那么从角迁移到反应可能会很痛苦。我们将首先安装产品毛羽。
npm安装,节省eslint babel-eslint
接下来,安装react2angular。如果你从未安装过的反应,你还将需要安装反应,react-dom和prop-types。
npm安装,节省react2angular反应react-dom prop-types
<强>第2步:创建一个反应组件
现在,我们已经有了一个角组件用来呈现城市的名称。接下来,我们需要渲染特色图像。假设这个图片是通过道具提供给我们的。我们的反应组件如下所示:
从“反应”进口{组件};
类RenderImage扩展组件{
呈现(){
const imageUrl=this.props.imageUrl;
回报(
& lt; div>
& lt; img src=https://www.yisu.com/zixun/{imageUrl} alt="/比;
& lt;/div>
);
}
}
之前
<强>第3步:传递道具属性
请记住,在第2步中,假设有一个通过道具获取的可用图像。我们现在要填充道具值。你可以使用道具将依赖关系传递给反应组件。请务必注意,反应组件没有任何角依赖关系可用。你可以这样想安康;反应组件就像一个连接到角应用的容器。如果你需要容器继承父母的信息,你将需要通过道具明确地接入。
所以,为了传递依赖关系,我们将在角中添加一个renderImage组件,并将其作为参数传递给imageUrl:
角。模块(“demoApp”, [])
.component (renderImage, react2angular (renderImage [' imageUrl ']));
<强>第4步:导入角模板
现在,你可以像任何其他组件一样简单地将这个组件导入到角应用中:
& lt; div ng-repeat=癱trl.bucketlist美元项目”在
& lt; h3> {{item.city}} & lt;/h3>
& lt; p>我想看看& lt;跨越ng-repeat=癷tem.sites网站”在{{网站}}& lt;/span>
& lt; render-image图像url={{item.img}}祝辞& lt;/render-image>
& lt;/div>
