Reactjs 将道具传递给动态加载的组件 导出常量菜单={ 用户1：{ 用户菜单： }, 用户2：{ 用户菜单： } }; render（）{ ... //我想把道具传给你？ {Menus[user1].userMenu} }

在这种情况下，我必须动态地将道具传递给组件。我尝试了重新组合中的props（）

，但没有成功

任何帮助都将不胜感激
谢谢
你需要把钥匙放在引号里

export const Menus = {
    user1: {
        userMenu: <User1Menu />
    },
    user2: {
        userMenu: <User2Menu />
    }
};



render() {
...
// I want to pass props to <User1Menu /> ?
{Menus[user1].userMenu}
}

使用点表示法：
菜单。user1.userMenu
或使用字符串表示法：
菜单[“user1”]。userMenu

在有名为
user1
的变量之前，不能使用
菜单[user1]。userMenu

我建议执行以下操作，它将通过一步（
Menus.user1
或
Menus[“user1”]
）减少对象遍历

并将其传递到菜单中的组件，如下所示：
Menus.user1（您的propsthattyourePassingToComponent）
您可以将组件包装在一个函数中，该函数将接收和传播props

const yourPropsThatYourePassingToComponent = {
  onChange: (param) => this.onChange(param),
  arrayOfObj: [{ key1:"val1" }, { key2:"val2" }],
  fetchSomething: this.props.fetchSomething
};

导出常量菜单={
用户1：{
用户菜单：（道具）=>
},
用户2：{
用户菜单：（道具）=>
}
};
render（）{
...
//我想把道具传给你？
{menu['user1'].userMenu（{prop1:'prop1value'，prop2:'prop2value'}）}
}
此示例仅用于演示。真正的问题是在这里传递道具。你能编辑你的答案吗？谢谢，但这并不能解决传递道具的真正问题。它抱怨缺少组件显示名称。我还没有测试上述代码，可能是个小问题，如果你能分享回购协议，我可以帮你
export const Menus = {
  user1: <User1Menu />,
  user2: <User2Menu />
};


export const Menus = {
    user1: (yourProps) => <User1Menu ...yourProps />
    user2: (yourProps) => <User2Menu ...yourProps />
});


const yourPropsThatYourePassingToComponent = {
  onChange: (param) => this.onChange(param),
  arrayOfObj: [{ key1:"val1" }, { key2:"val2" }],
  fetchSomething: this.props.fetchSomething
};

export const Menus = {
    user1: {
        userMenu: (props) => <User1Menu {...props}/>
    },
    user2: {
        userMenu: (props) => <User2Menu {...props}/>
    }
};



render() {
...
// I want to pass props to <User1Menu /> ?
{Menus['user1'].userMenu({prop1: 'prop1value', prop2: 'prop2value'})}
}