可編輯的固定元件

可編輯的React元件可以是「固定」元件，或硬式編碼至SPA檢視。這可讓開發人員將SPA Editor相容的元件放入SPA檢視中，並讓使用者在AEM SPA Editor中製作元件的內容。

固定元件

在本章中，我們會取代首頁檢視的標題「目前歷險」，這是 Home.js 具有固定但可編輯的標題元件時。固定元件可保證標題的放置，但也允許編寫標題的文字，並在開發週期之外進行變更。

更新WKND應用程式

新增固定「首頁」視圖的元件：

建立可自定義編輯的Title元件，並將其註冊到項目的Title的資源類型
將可編輯的Title元件放置在SPA首頁檢視上

建立可編輯的React Title元件

在SPA首頁檢視中，取代硬式編碼文字 <h2>Current Adventures</h2> 具有自訂可編輯的標題元件。必須先執行下列動作，才能使用Title元件：

建立自訂Title React元件
使用以下來源的方法裝飾自訂標題元件： @adobe/aem-react-editable-components 讓其可編輯。
使用註冊可編輯的標題元件 MapTo 以便用於容器元件.

要執行此操作：

在開啟遠端SPA專案 ~/Code/aem-guides-wknd-graphql/remote-spa-tutorial/react-app 在IDE中
在建立React元件 react-app/src/components/editable/core/Title.js

將下列程式碼新增至 Title.js.

import React from 'react'
import { RoutedLink } from "./RoutedLink";

const TitleLink = (props) => {
return (
    <RoutedLink className={props.baseCssClass + (props.nested ? '-' : '__') + 'link'}
        isRouted={props.routed}
        to={props.linkURL}>
    {props.text}
    </RoutedLink>
);
};

const TitleV2Contents = (props) => {
    if (!props.linkDisabled) {
        return <TitleLink {...props} />
    }

    return <>{props.text}</>
};

export const Title = (props) => {
    if (!props.baseCssClass) {
        props.baseCssClass = 'cmp-title'
    }

    const elementType = (!!props.type) ? props.type.toString() : 'h3';
    return (<div className={props.baseCssClass}>
        {
            React.createElement(elementType, {
                    className: props.baseCssClass + (props.nested ? '-' : '__') + 'text',
                },
                <TitleV2Contents {...props} />
            )
        }

        </div>)
}

export const titleIsEmpty = (props) => props.text == null || props.text.trim().length === 0

請注意，此React元件尚未使用AEM SPA Editor編輯。此基礎元件將在下一步中設為可編輯。

閱讀程式碼的註解，了解實作詳細資訊。

在建立React元件 react-app/src/components/editable/EditableTitle.js

將下列程式碼新增至 EditableTitle.js.

// Import the withMappable API provided bu the AEM SPA Editor JS SDK
import { EditableComponent, MapTo } from '@adobe/aem-react-editable-components';
import React from 'react'

// Import the AEM the Title component implementation and it's Empty Function
import { Title, titleIsEmpty } from "./core/Title";
import { withConditionalPlaceHolder } from "./core/util/withConditionalPlaceholder";
import { withStandardBaseCssClass } from "./core/util/withStandardBaseCssClass";

// The sling:resourceType of the AEM component used to collected and serialize the data this React component displays
const RESOURCE_TYPE = "wknd-app/components/title";

// Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
const EditConfig = {
    emptyLabel: "Title",        // The component placeholder in AEM SPA Editor
    isEmpty: titleIsEmpty,      // The function to determine if this component has been authored
    resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
};

export const WrappedTitle = (props) => {
    const Wrapped = withConditionalPlaceHolder(withStandardBaseCssClass(Title, "cmp-title"), titleIsEmpty, "TitleV2")
    return <Wrapped {...props} />
}

// EditableComponent makes the component editable by the AEM editor, either rendered statically or in a container
const EditableTitle = (props) => <EditableComponent config={EditConfig} {...props}><WrappedTitle /></EditableComponent>

// MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
MapTo(RESOURCE_TYPE)(EditableTitle);

export default EditableTitle;

此 EditableTitle React元件包住 Title React元件、包裝和裝飾，以便在AEM SPA Editor中編輯。

使用React EditableTitle元件

現在EditableTitle React元件已在中註冊，且可在React應用程式中使用，請取代首頁檢視上的硬式編碼標題文字。

編輯 react-app/src/components/Home.js

在 Home() 在底部，匯入 EditableTitle 並將硬式編碼標題取代為 AEMTitle 元件：

...
import EditableTitle from './editable/EditableTitle';
...
function Home() {
    return (
        <div className="Home">

        <EditableTitle
            pagePath='/content/wknd-app/us/en/home'
            itemPath='root/title'/>

            <Adventures />
        </div>
    );
}

此 Home.js 檔案看起來應該像這樣：

Home.js