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

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>
    )
}

并不是说每个同类型的兄弟都需要一个唯一的键，以便 react 可以区分它们。通常，您将为此使用实体的主键。

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