Question

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



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

在这种情况下，我必须将道具动态传递给组件。我尝试过withProps() from recompose，但是没有运气。

任何帮助将不胜感激谢谢

Answer 1

您可以将组件包装在一个可以接收和传播道具的函数中。

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

Answer 2

使用点表示法Menus.user1.userMenu或使用字符串表示法Menus["user1"].userMenu

在拥有名为Menus[user1].userMenu的变量之前，您不能使用user1。

我建议您执行以下操作，它可以一步一步（Menus.user1或Menus["user1"]）减少对象遍历！

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

并将其传递到菜单中的组件，如下所示：Menus.user1(yourPropsThatYourePassingToComponent)。

Answer 3

您需要将密钥放在引号中，例如

Menus["user1"].userMenu

将道具传递给动态加载的组件

3 个答案: