Как установить свойство данных для MenuItems в ExtReact?
Таким образом, я смог вернуть массив из действия и редуктор в статическом классе / функции, и теперь я хочу отобразить эти данные в свойстве данных MenuItems ( https://docs.sencha.com/extreact/6.5.0/modern/Ext.menu.Item.html). Я чувствую, что мне нужно установить свойства встроенной функции TPL, но я не знаю, как. Это то, что я пробовал до сих пор (читать комментарии):
function ShortcutComponent({ usershortcuts }) {
console.log(usershortcuts); // I get an array
return (
<Button ui="headerButton" arrow={false} ripple={false} iconCls="icon-directions" border={false} handler={() => this.loadData()}>
<Menu title="Shortcuts">
<MenuItem data={usershortcuts} tpl={function(data){
setIconCls(data.shortcutDefinition.iconCls); // I can't use setIconCls
setText(data.shortcutDefinition.description); // I can't set text
}} />
</Menu>
</Button>
)
}
const mapStateToProps = (state) => {
return {
usershortcuts: state.usershortcuts
}
};
const mapDispatchToProps = (dispatch) => {
return {
actions: bindActionCreators(usershortcutAction, dispatch)
}
}
export default connect(mapStateToProps, mapDispatchToProps) (ShortcutComponent);
1 ответ
Использование map()
для рендеринга массива элементов:
function ShortcutComponent({ usershortcuts }) {
return (
<Button ui="headerButton" arrow={false} ripple={false} iconCls="icon-directions" border={false} handler={() => this.loadData()}>
<Menu title="Shortcuts">
{usershortcuts.map(shortcut => (
<MenuItem key={shortcut.key} data={shortcut} tpl={data => (
<a className={data.iconCls} href={data.href}>{data.description}</a>
)}/>
))}
</Menu>
</Button>
)
}
Не то чтобы каждый брат одного и того же типа нуждался в уникальном ключе, чтобы реагирующий мог различить их. Обычно для этого вы будете использовать первичные ключи ваших сущностей.
tpl
props - это функция, которая должна возвращать jsx-представление элемента меню. В моем примере это ссылка, но может быть и все остальное.