I componenti React modificabili possono essere "fissi" o codificati nelle viste SPA. Questo consente agli sviluppatori di inserire SPA componenti compatibili con l’editor nelle viste di SPA e permette agli utenti di creare il contenuto dei componenti in AEM SPA Editor.
In questo capitolo, sostituiamo il titolo della visualizzazione Home, "Current Adventures", che è un testo codificato in Home.js
con un componente Titolo fisso ma modificabile. I componenti fissi garantiscono il posizionamento del titolo, ma consentono anche di creare il testo del titolo e di modificarlo al di fuori del ciclo di sviluppo.
Per aggiungere un componente Fisso alla visualizzazione Home:
Nella vista Home SPA, sostituisci il testo hardcoded <h2>Current Adventures</h2>
con il componente Titolo dei componenti core React AEM. Prima di poter utilizzare il componente Titolo , è necessario:
@adobe/aem-core-components-react-base
withMappable
in modo che gli sviluppatori possano inserirlo nel SPAMapTo
in modo che possa essere utilizzato in componente contenitore in un secondo momento.Per effettuare ciò:
Apri il progetto di SPA remota all'indirizzo ~/Code/wknd-app/aem-guides-wknd-graphql/react-app
nell'IDE
Crea un componente React in react-app/src/components/aem/AEMTitle.js
Aggiungi il codice seguente a 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;
Leggi i commenti del codice per i dettagli di implementazione.
Il file AEMTitle.js
deve essere simile al seguente:
Ora che il componente Titolo del componente core React AEM è registrato e disponibile per l’uso nell’app React, sostituisci il testo del titolo codificato nella vista Home.
Modifica react-app/src/App.js
nel Home()
in basso, sostituisci il titolo codificato con il nuovo componente AEMTitle
:
<h2>Current Adventures</h2>
con
<AEMTitle
pagePath='/content/wknd-app/us/en/home'
itemPath='root/title'/>
Aggiorna Apps.js
con il seguente codice:
...
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>
);
}
Il file Apps.js
deve essere simile al seguente:
Accedi ad AEM Author
Passa a Siti > App WKND
Tocca Home e seleziona Modifica dalla barra delle azioni superiore
Seleziona Modifica dal selettore della modalità di modifica in alto a destra nell’Editor pagina
Passa il puntatore del mouse sul testo del titolo predefinito sotto il logo WKND e sopra l’elenco delle avventure, fino a quando non viene visualizzata la struttura di modifica blu
Tocca per esporre la barra delle azioni del componente, quindi tocca la chiave chiave per modificare
Crea il componente Titolo :
Titolo: Avventure WKND
Tipo/Dimensione: H2
Tocca Fine per salvare
Anteprima delle modifiche in AEM Editor SPA
Aggiorna l'app WKND in esecuzione localmente su http://localhost:3000 e osserva le modifiche al titolo create immediatamente applicate.
Hai aggiunto un componente fisso e modificabile all’app WKND. Ora sai come:
I passaggi successivi sono aggiungere un componente contenitore AEM ResponsiveGrid al SPA che consente all'autore di aggiungere e modificare componenti al SPA!