Как установить свойство данных для MenuItems в ExtReact?

Question

Таким образом, я смог вернуть массив из действия и редуктор в статическом классе / функции, и теперь я хочу отобразить эти данные в свойстве данных 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);

Answer 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-представление элемента меню. В моем примере это ссылка, но может быть и все остальное.