AEM 6.5中如何将content.xml配置的属性值传递给React组件

解决方法 #

核心逻辑：你写的.html文件里的${properties.xxx}是AEM服务端渲染时执行的变量替换，而React代码是打包后在客户端浏览器运行的，无法直接读取服务端的HTL变量，需要通过HTML节点把属性值传递到前端再读取。

方法1：复用你已有的隐藏input实现 #

不需要修改现有HTML，直接调整Sample.js读取DOM里的隐藏input值即可：

import React from 'react';
import ReactDOM from 'react-dom';

// 读取隐藏input存储的属性值
const selectionVal = document.getElementById('dataSelection').value;
// 如果要读取ctaText，可以在sample.html里新增一个hidden input存`${properties.ctaText}`，用同样方法读取

// 编写业务组件
function Sample() {
  return (
    <div>
      <h3>{selectionVal}</h3>
      {/* 其他组件逻辑 */}
    </div>
  );
}

// 挂载组件到指定节点
ReactDOM.render(<Sample />, document.getElementById('sample'));

你原来的React代码写法有问题：ReactDOM.render是组件挂载的入口方法，不能写在函数组件内部。

方法2：用data属性传值（更规范的推荐方案） #

不需要额外写隐藏input，直接把需要的属性挂载到React根节点的自定义data属性上，代码更简洁。
首先修改sample.html：

<div id="sample" 
     data-selection="${properties.selection}"
     data-cta-text="${properties.ctaText}">
</div>

然后修改Sample.js读取节点的dataset属性：

import React from 'react';
import ReactDOM from 'react-dom';

const mountNode = document.getElementById('sample');
// 批量读取所有传入的属性
const props = {
  selection: mountNode.dataset.selection,
  ctaText: mountNode.dataset.ctaText
};

function Sample() {
  return (
    <div>
      <h3>{props.selection}</h3>
      <button>{props.ctaText}</button>
    </div>
  );
}

ReactDOM.render(<Sample />, mountNode);

内容的提问来源于stack exchange，提问作者Script Host