javascript - AEM 6.5 如何将 content.xml 数据传递给反应组件

Question

我对 AEM 6.5 和 React 非常陌生，所以基本上我正在设置 Venia Store 视图并构建一个应该可作为组件编辑的自定义组件ui.apps/src/main/content/jcr_root/apps/venia/components/sample，在sample.html我渲染反应组件时，它也可以正常工作，但我的疑问来自示例.html 当我给出${properties.ctaText}值时渲染得很好，但挑战是如何在反应组件中渲染相同的属性值。

任何帮助将不胜感激，谢谢

示例.html

<input type="text" value="${properties.selection}" id="dataSelection" hidden>

<div id="sample"></div>

内容.xml

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Tyres"
    sling:resourceType="cq/gui/components/authoring/dialog">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/container">
        <items jcr:primaryType="nt:unstructured">
            <tabs
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/coral/foundation/tabs"
                maximized="{Boolean}true">
                <items jcr:primaryType="nt:unstructured">
                    <properties
                        jcr:primaryType="nt:unstructured"
                        jcr:title="Properties"
                        sling:resourceType="granite/ui/components/coral/foundation/container"
                        margin="{Boolean}true">
                        <items jcr:primaryType="nt:unstructured">
                            <columns
                                jcr:primaryType="nt:unstructured"
                                sling:resourceType="granite/ui/components/coral/foundation/fixedcolumns"
                                margin="{Boolean}true">
                                <items jcr:primaryType="nt:unstructured">
                                    <column
                                        jcr:primaryType="nt:unstructured"
                                        sling:resourceType="granite/ui/components/coral/foundation/container">
                                        <items jcr:primaryType="nt:unstructured">
                                            <tyre-heading
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="tyre heading field"
                                                fieldLabel="Tyre Heading"
                                                name="./selection"
                                                selectionId="combinedSku"/>
                                            <tyreDesc
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
                                                fieldDescription="The text displayed by the call-to-action button"
                                                fieldLabel="Call to action text"
                                                name="./ctaText"/>
                                        </items>
                                    </column>
                                </items>
                            </columns>
                        </items>
                    </properties>
                </items>
            </tabs>
        </items>
    </content>
</jcr:root>

反应：

示例.js

import React from 'react';

export default function sample() {
ReactDOM.render(${properties.selection}, document.getElementById('sample'));
};

标签： javascripthtmlreactjsxmlaem