Передача реквизита динамически загружаемым компонентам
export const Menus = {
user1: {
userMenu: <User1Menu />
},
user2: {
userMenu: <User2Menu />
}
};
render() {
...
// I want to pass props to <User1Menu /> ?
{Menus[user1].userMenu}
}
У меня такая ситуация, когда я должен динамически передавать реквизиты компонентам. Я пытался withProps() from recompose но не повезло.
Любая помощь будет оценена Спасибо
Ответы 3
Вам нужно поместить ключ в кавычки, например.
Menus["user1"].userMenu
Используйте точечную нотацию: 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).
Образец предназначен только для демонстрационных целей. Настоящая проблема заключается в передаче реквизита здесь. Не могли бы вы отредактировать свой ответ?
Вы можете обернуть свои компоненты в функцию, которая будет получать и распространять реквизиты.
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'})}
}
Он жалуется на отсутствующее отображаемое имя компонента
я не тестировал приведенный выше код, может быть небольшая проблема, я могу помочь, если вы можете поделиться репозиторием
Спасибо, но это не решает реальную проблему передачи реквизита.