如何为ExtReact的MenuItem设置data属性？已从Redux获取数组待渲染

我来帮你搞定这个问题！其实不用在tpl的内联函数里绕弯子，直接把你的usershortcuts数组绑定到MenuItem的data属性，再配合XTemplate的遍历语法就能轻松渲染。分两种场景给你示例：

场景1：在单个MenuItem里渲染所有数组项 #

如果希望把所有快捷方式放在同一个MenuItem中展示，直接把数组传给data，然后用<tpl for=".">遍历数组：

import { Button, Menu, MenuItem, XTemplate } from '@sencha/ext-react';

function ShortcutComponent({ usershortcuts }) {
  console.log(usershortcuts); // 已获取到数组
  // 先处理空数组的情况，避免报错
  if (!usershortcuts?.length) return null;

  return (
    <Button ui="headerButton" arrow="true">
      <Menu>
        <MenuItem
          data={usershortcuts}
          tpl={
            <XTemplate>
              {/* 用".代表当前的data数组，遍历每一项 */}
              <tpl for=".">
                {/* 这里的this指代数组中的单个对象，根据你的数据结构修改属性名 */}
                <div class="shortcut-item">{this.text}</div>
              </tpl>
            </XTemplate>
          }
        />
      </Menu>
    </Button>
  );
}

场景2：每个数组项对应独立的MenuItem #

如果希望每个快捷方式都是一个单独的MenuItem选项，用React的map循环生成即可，这样交互性更强：

import { Button, Menu, MenuItem } from '@sencha/ext-react';

function ShortcutComponent({ usershortcuts }) {
  console.log(usershortcuts); // 已获取到数组
  if (!usershortcuts?.length) return null;

  return (
    <Button ui="headerButton" arrow="true">
      <Menu>
        {/* 遍历数组，为每个快捷方式生成MenuItem */}
        {usershortcuts.map(shortcut => (
          <MenuItem
            key={shortcut.id} // 必须加key，避免React渲染警告
            text={shortcut.text} // 直接绑定文本，简单快捷
            // 如果需要自定义模板，也可以绑定单个对象到data，再用tpl渲染
            data={shortcut}
            // tpl={<XTemplate><span>{this.text}</span></XTemplate>}
          />
        ))}
      </Menu>
    </Button>
  );
}

关键提示： #

1. 确保导入了需要的组件，比如XTemplate（如果用模板的话）；
2. 处理数组为空的情况，避免出现渲染错误；
3. 用map循环时一定要加唯一的key属性，React要求这个来优化渲染；
4. XTemplate里的this指代当前遍历的数组项，所以要根据你实际的usershortcuts数据结构调整属性名（比如如果你的项是{id:1, label:'首页'}，就用this.label）。

内容的提问来源于stack exchange，提问作者Милош Рајковић