如何在ExtReact中为MenuItems设置数据属性？

Question

因此，我能够在静态类/函数中从操作和reducer返回数组，现在我想在MenuItems (https://docs.sencha.com/extreact/6.5.0/modern/Ext.menu.Item.html)的data属性中呈现数据。我觉得我需要在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>
    )
}

并不是说相同类型的每个兄弟都需要唯一的键，这样react才能区分它们。通常你会使用你的实体的主键。

jsx是一个必须返回菜单项的tpl表示形式的函数。在我的示例中，这是一个链接，但它可以是其他所有内容。