为 SPA 实施 React 组件

单页应用程序 (SPA) 可以为网站用户提供引人入胜的良好体验。开发人员希望能够使用SPA框架构建站点,而作者希望无缝编辑AEM中的内容,使用SPA框架构建站点。

SPA创作功能优惠了在AEM内支持SPA的一个全面的解决方案。 本文举了一个示例,说明如何调整简单、现有的React组件以与AEM SPA Editor一起使用。

注意

单页应用程序(SPA)编辑器功能需要AEM 6.4 service pack 2或更高版本。

SPA编辑器是需要SPA框架的客户端渲染(例如,React或Angular)的项目的推荐解决方案。

简介

由于AEM要求在SPA和SPA编辑器之间签订简单而轻量的合同,采用现有的Javascript应用程序并将其改编为与SPA一起使用非常简单。

本文说明了We.Retail日志示例SPA上天气组件的示例。

在阅读本文之前,您应熟悉SPA AEM应用程序的结构。

注意

此文档仅将We.Retail日志应用程序用于演示目的。 它不应用于任何项目工作。

任何AEM项目都应利用AEM项目原型,它支持使用React或Angular的SPA项目并利用SPA SDK。

天气组件

天气组件位于We.Retail日志应用程序的左上角。 它显示已定义位置的当前天气,动态获取天气数据。

使用天气小部件

screen_shot_2018-06-08at143224

在SPA编辑器中创作SPA的内容时,天气组件将显示为任何其他AEM组件,并带有一个工具栏,并且可编辑。

screen_shot_2018-06-08at143304

可以像任何其他AEM组件一样在对话框中更新城市。

screen_shot_2018-06-08at143446

更改将被保留,并且组件会使用新的天气数据自动更新自己。

screen_shot_2018-06-08at143524

气象组件实施

天气组件实际上基于公开可用的React组件,称为React Open Weather,该组件已经调整为在We.Retail日志示例SPA应用程序中作为组件使用。

以下是NPM文档中使用React Open Weather组件的片段。

screen_shot_2018-06-08at144723 screen_shot_2018-06-08at144215

查看We.Retail日志应用程序中自定义天气组件(Weather.js)的代码:

  • 第16行:React Open Weather构件会根据需要加载。

  • 第46行:该函 MapTo 数将此React组件与相应的AEM组件相关,以便在SPA编辑器中对其进行编辑。

  • 第22-29行:定 EditConfig 义城市,检查城市是否已填充,如果为空,则定义值。

  • 第31-44行:Weather组件扩展了类 Component 并提供React Open Weather组件的NPM使用文档中定义的所需数据,并渲染该组件。

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 ~ Copyright 2018 Adobe Systems Incorporated
 ~
 ~ Licensed under the Apache License, Version 2.0 (the "License");
 ~ you may not use this file except in compliance with the License.
 ~ You may obtain a copy of the License at
 ~
 ~     https://www.apache.org/licenses/LICENSE-2.0
 ~
 ~ Unless required by applicable law or agreed to in writing, software
 ~ distributed under the License is distributed on an "AS IS" BASIS,
 ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 ~ See the License for the specific language governing permissions and
 ~ limitations under the License.
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
import React, {Component} from 'react';
import ReactWeather from 'react-open-weather';
import {MapTo} from '@adobe/aem-react-editable-components';

require('./Weather.css');

const WeatherEditConfig = {

    emptyLabel: 'Weather',

    isEmpty: function() {
        return !this.props || !this.props.cq_model || !this.props.cq_model.city || this.props.cq_model.city.trim().length < 1;
    }
};

class Weather extends Component {

    render() {
        let apiKey = "12345678901234567890";
        let city;

        if (this.props.cq_model) {
            city = this.props.cq_model.city;
            return <ReactWeather key={'react-weather' + Date.now()} forecast="today" apikey={apiKey} type="city" city={city} />
        }

        return null;
    }
}

MapTo('we-retail-journal/global/components/weather')(Weather, WeatherEditConfig);

虽然后端组件必须已存在,但前端开发者只需很少的编码,即可在We.Retail日志SPA中利用React Open Weather组件。

下一步

有关开发SPA for AEM的详细信息,请参见文章为AEM开发SPA

在此页面上

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now