Вызов компонента через реквизит в ReactJS
Я создаю компонент-оболочку для значков, которые импортирую с помощью react-icons. Вот пример того, как это выглядит сейчас:
import { FaTwitter as Twitter} from 'react-icons/fa'
import { Icon } from './elements
<Icon>
<Twitter />
<Icon>
Теперь это работает именно так, как я хочу, но я хотел бы упростить код. В идеале я бы хотел, чтобы это выглядело/работало так:
<Icon name='twitter' />
есть идеи как это сделать?
ПРИМЕЧАНИЕ: Если это поможет, вот текущий код для моего компонента Icon:
export const Icon = props => <IconBase {...props} />
Компонент <IconBase> — это всего лишь несколько стилей из styled-components.
ОБНОВИТЬ
Я просто хочу отметить, что пример Twitter — это всего лишь пример. Я ищу решение, которое будет работать независимо от того, какое имя я передам компоненту <Icon>. Итак, другими словами, все следующее (и многое другое) будет работать:
<Icon name = "Facebook" />
<Icon name = "Search" />
<Icon name = "Menu" />
Каждый из них будет эквивалентен:
<Icon><Facebook /></Icon>
<Icon><Search /></Icon>
<Icon><Menu /></Icon>
Другими словами, независимо от того, какую иконку я вытащу из react-icons, она будет правильно отображаться по отношению к реквизиту name.
Является ли твиттер функцией?
@Jesse Твиттер — это компонент. Таким образом, <Icon name = "twitter"/> будет эквивалентно <Icon><Twitter /></Icon>
@JohnSnow Я не понимаю, как это будет работать. Не могли бы вы показать мне более подробный пример?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Я думаю, что-то вроде этого удовлетворило бы ваше условие.
const App = () => <Icon name = "twitter" />;
const dict = { twitter: <Twitter /> };
const Icon = ({ name }) => <IconBase>{dict[name]}</IconBase>;
Спасибо за пример. Однако, чтобы этот метод работал, мне нужно создать новую словарную запись для каждого значка, который я хочу использовать — Facebook, Youtube, MenuIcon, значок поиска и т. д.? Есть ли способ обобщить это, чтобы оно автоматически работало независимо от того, какое имя я передаю?
Что ж, вы можете просто передать компонент в качестве реквизита имени и указать его как {props.name} внутри вашего компонента Icon. Но если ваше ограничение заключается в том, что вы хотите использовать name = "{string}", то я не думаю, что есть другой способ.
Если вы хотите использовать String в качестве реквизита, вам придется использовать словарь. Если вы передадите фактический компонент, то вы этого не сделаете. Вы также можете использовать шаблон Render Prop. <Icon render = {(Component)=> <Component />} /> Все они одинаковые...
Спасибо -- в итоге я остановился на этом варианте: export const Icon = props => <IconBase><props.name /></IconBase>;. Что я делаю следующим образом: <Icon name = {Facebook} />
Что насчет этого?
// definition:
const Icon = (props) => <SomeIconWrapper><props.glyph /></SomeIconWrapper>;
// usage:
<Icon glyph = {Twitter} />
Это очень просто и гибко, нет необходимости в каком-либо словаре или что-то в этом роде.
Да, но в примере он использует String в качестве реквизита, а не Component. Это требование. Я думал, что вся проблема заключается в преобразовании строки для ссылки на компонент.
Я бы предпочел использовать String, но я открыт для использования Component.
Вы можете создать объект словаря, который указывает на компонент, который вы хотите отобразить как
Iconдочерние элементы. что-то вроде{twitter: <Twitter />}