Question

所以我能够在静态类/函数中从action和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>
    )
}

并非每个相同类型的兄弟都需要一个唯一的密钥，以便反应可以区分它们。通常，您将使用实体的主键。

tpl道具是一个必须返回菜单项的jsx表示的函数。在我的例子中，这是一个链接，但它可以是其他一切。

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

1 个答案: