편집 가능한 고정 구성 요소

편집 가능한 React 구성 요소는 "고정" 또는 SPA 보기로 하드 코딩할 수 있습니다. 이 경우 개발자는 SPA 편집기 호환 구성 요소를 SPA 보기에 배치하고 사용자가 AEM SPA 편집기에서 구성 요소의 컨텐츠를 작성할 수 있습니다.

고정 구성 요소

이 장에서는 의 하드 코딩된 텍스트인 홈 보기의 제목인 "현재 모험"을 바꿉니다 Home.js ( 고정되었지만 편집 가능한 제목 구성 요소 사용) 고정 구성 요소는 제목을 배치하도록 하지만, 제목의 텍스트를 작성할 수도 있고, 개발 주기 외부에서 변경할 수도 있습니다.

WKND 앱 업데이트

을(를) 추가하려면 고정 구성 요소를 홈 보기에 추가합니다.

사용자 지정 편집 가능한 제목 구성 요소를 만들어 프로젝트의 제목 리소스 유형에 등록합니다
편집 가능한 제목 구성 요소를 SPA 홈 보기에 배치합니다

편집 가능한 React 제목 구성 요소 만들기

SPA 홈 보기에서 하드 코딩된 텍스트를 바꿉니다 <h2>Current Adventures</h2> 편집 가능한 사용자 지정 제목 구성 요소에 사용할 수 있습니다. 제목 구성 요소를 사용하려면 먼저 다음을 수행해야 합니다.

사용자 지정 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