可編輯的固定元件

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

固定元件

在本章中，我們將首頁檢視的標題「Current Adventures」（目前歷險）取代為固定但可編輯的標題元件，此元件為Home.js中的硬式編碼文字。固定元件可保證標題的放置，但也允許編寫標題的文字，並在開發週期之外進行變更。

更新WKND應用程式

要將「固定」元件添加到「首頁」視圖：

匯入AEM React核心元件標題元件並註冊至專案標題的資源類型
將可編輯的Title元件放置在SPA首頁檢視上

在AEM React核心元件的標題元件中匯入

在SPA首頁檢視中，將硬式編碼文字<h2>Current Adventures</h2>取代為AEM React核心元件的標題元件。必須先執行下列動作，才能使用Title元件：

從@adobe/aem-core-components-react-base導入Title元件
使用withMappable註冊，讓開發人員可將其放入SPA
此外，請註冊MapTo，以便以後在容器元件中使用。

要執行此操作：

在IDE的~/Code/wknd-app/aem-guides-wknd-graphql/react-app處開啟遠程SPA項目
在react-app/src/components/aem/AEMTitle.js建立React元件

將下列程式碼新增至AEMTitle.js。

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

// Import the AEM React Core Components' Title component implementation and it's Empty Function
import { TitleV2, TitleV2IsEmptyFn } from "@adobe/aem-core-components-react-base";

// The sling:resourceType for which this Core Component is registered with in AEM
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: TitleV2IsEmptyFn, // The function to determine if this component has been authored
    resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
};

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

// withMappable allows the component to be hardcoded into the SPA; <AEMTitle .../>
const AEMTitle = withMappable(TitleV2, EditConfig);

export default AEMTitle;

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

AEMTitle.js檔案應該如下所示：

AEMTitle.js

使用React AEMTitle元件

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

編輯 react-app/src/App.js

在底部的Home()中，以新的AEMTitle元件取代硬式編碼標題：

<h2>Current Adventures</h2>

替換為

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

使用下列程式碼更新Apps.js:

...
import { AEMTitle } from './components/aem/AEMTitle';
...
function Home() {
    return (
        <div className="Home">

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

            <Adventures />
        </div>
    );
}

Apps.js檔案應該如下所示：

App.js