您好,登錄后才能下訂單哦!
Angular 和 React 都是偉大的框架/庫。Angular 提供了 MVC(模型、視圖、控制器)的定義結(jié)構(gòu)。React 提供基于狀態(tài)變化的輕量級(jí)呈現(xiàn)機(jī)制。通常情況下,開發(fā)者在 AngularJS 上有一個(gè)舊的應(yīng)用程序后,他們會(huì)想用 ReactJS 建立新的特性。
雖然將 AngularJS 應(yīng)用移除,從頭開始建立一個(gè) ReactJS 應(yīng)用是不錯(cuò)的選擇。但對(duì)于大規(guī)模應(yīng)用來說,它不是一個(gè)可行的解決方案。在這種情況下,單獨(dú)建立一個(gè) React 組件并將其導(dǎo)入 Augular 會(huì)更容易。
在這篇文章中,我將幫你在 Angular 應(yīng)用中使用 react2angular 創(chuàng)建一個(gè) React 組件。
目標(biāo)和計(jì)劃
這里就是我們將要做的事情 ——
給定: 一個(gè)用來展示城市名稱和它的著名景點(diǎn)的 Angular 應(yīng)用。
目標(biāo): 給該 Angular 應(yīng)用添加一個(gè) React 組件。React 的組件將會(huì)顯示一張?zhí)卣骰木包c(diǎn)照片。
計(jì)劃: 我們將創(chuàng)建一個(gè) React 組件,通過圖片 Url 來傳遞,并將圖像作為一個(gè) React 組件來顯示。
讓我們開始吧!
第 0 步:擁有一個(gè) Angular 應(yīng)用
為實(shí)現(xiàn)本文的目的,請保持 Angular 應(yīng)用的簡單性。我計(jì)劃在 2018 年進(jìn)行歐洲之旅,因此我的 Angular 應(yīng)用實(shí)質(zhì)上是一個(gè)我想訪問的目的地清單。
以下是數(shù)據(jù)集 bucketlist 看起來的樣子:
const bucketlist = [{ city: 'Venice', position: 3, sites: ['Grand Canal', 'Bridge of Sighs', 'Piazza San Marco'], img: 'https://unsplash.com/photos/ryC3SVUeRgY', }, { city: 'Paris', position: 2, sites: ['Eiffel Tower', 'The Louvre', 'Notre-Dame de Paris'], img: 'https://unsplash.com/photos/R5scocnOOdM', }, { city: 'Santorini', position: 1, sites: ['Imerovigli', 'Akrotiri', 'Santorini Arts Factory'], img: 'https://unsplash.com/photos/hmXtDtmM5r0', }];
這是 angularComponent.js 的樣子:
function AngularComponentCtrl() { var ctrl = this; ctrl.bucketlist = bucketlist; }; angular.module('demoApp').component('angularComponent', { templateUrl: 'angularComponent.html', controller: AngularComponentCtrl });
這是 angularComponent.html:
<div ng-repeat="item in $ctrl.bucketlist" ng-sort="item.position"> <h3>{{item.city}}</h3> <p> I want to see <span ng-repeat="sight in item.sights">{{sight}} </p></span> </div>
超簡單! 現(xiàn)在可以去圣托里尼了...
第1步:安裝依賴關(guān)系
如果你的編輯器沒有配置,那么從 Angular 遷移到 React 可能會(huì)很痛苦。我們將首先安裝 linting 。
npm install --save eslint babel-eslint
接下來,安裝 react2angular 。如果你從未安裝過 React ,你還將需要安裝 react,react-dom 和 prop-types 。
npm install --save react2angular react react-dom prop-types
第2步:創(chuàng)建一個(gè) React 組件
現(xiàn)在,我們已經(jīng)有了一個(gè) Angular 組件用來呈現(xiàn)城市的名稱。接下來,我們需要渲染特色圖像。假設(shè)這個(gè)圖片是通過 props 提供給我們的。我們的 React 組件如下所示:
import {Component} from 'react'; class RenderImage extends Component { render() { const imageUrl = this.props.imageUrl; return ( <div> <img src={imageUrl} alt=""/> </div> ); } }
第3步:傳遞 props 屬性
請記住,在第2步中,假設(shè)有一個(gè)通過 props 獲取的可用圖像。我們現(xiàn)在要填充 props 值。你可以使用 props 將依賴關(guān)系傳遞給 React 組件。請務(wù)必注意,React 組件沒有任何 Angular 依賴關(guān)系可用。 你可以這樣想 - React 組件就像一個(gè)連接到 Angular 應(yīng)用的容器。 如果你需要容器繼承父母的信息,你將需要通過 props 明確地接入。
所以,為了傳遞依賴關(guān)系,我們將在 Angular 中添加一個(gè) renderImage 組件 ,并將其作為參數(shù)傳遞給 imageUrl :
angular.module('demoApp', []) .component('renderImage', react2angular(RenderImage,['imageUrl']));
第4步:導(dǎo)入 Angular 模板
現(xiàn)在,你可以像任何其他組件一樣簡單地將這個(gè)組件導(dǎo)入到 Angular 應(yīng)用中:
<div ng-repeat="item in $ctrl.bucketlist"> <h3>{{item.city}}</h3> <p> I want to see <span ng-repeat="site in item.sites">{{site}}</span> <render-image image-url={{item.img}}></render-image> </div>
Ta Da! 不敢相信,這簡直就是魔法。當(dāng)然,這(更多的)是艱苦的工作和汗水,還有陪伴我們的咖啡,等等。
現(xiàn)在就去構(gòu)建一些 React 組件吧,勇士!
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。