Проход по компонентам и возврат в случае переключателя (React.js) - PullRequest
Новая
       30

Проход по компонентам и возврат в случае переключателя (React.js)

0 голосов
/ 29 ноября 2018

Краткое описание

Итак, благодаря сценарию svg-to-реагировать-cli у меня есть 73 компонента для моих иконок.Теперь, если я хочу вызвать эти значки, я могу по отдельности назвать каждую, которую я хочу использовать. Но это не то, что я хочу. Я хочу назвать только один компонент, в который я добавляю значение 'name'. например:

Мой вопрос

Как пройти через несколько компонентов внутрикаталог, и вернуть их внутри коммутатора? Вот так все мои 73 компонента внутри каталога выглядят так: 

import React from 'react';

export default function NAMEOFICON(props) {
  return (
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" width={100} height={100} {...props}>
      ...CONTENT OF SVG...
    </svg>
  );
}

Это то, что у меня есть 

import React from 'react';
import ALLCOMPONENTS from 'DIRECTORY WITH COMPONENTS'

// HERE I WANT TO LOOP THROUGH COMPONENTS AND ADD THEM IN THIS SWITCH
const getPath = (name, props) => {
  switch (name) {
    case 'NAME OF THE COMPONENT':
      ... HERE COMES CONTENT OF COMPONENT...
    default:
      return <path />;
  }
};
// HERE I CREATE A CONST TO LATER CALL THE DESIRED COMPONENT BY NAME
const Icon = ({
  name = '',
  style = {},
  fill = 'currentColor',
  viewBox = '',
  width = '20px',
  className = 'icon icon' + name,
  height = '20px'
}) => (
    {NAME OF COMPONENT({ fill })}
);

export default Icon ;

Ответы [ 2 ]

0 голосов
/ 29 ноября 2018

Одним из решений может быть ...

Иметь индексный файл, который экспортирует все ваши значки. 

export { SomeIcon } from './someIcon.jsx';
export { SomeOtherIcon } from './someOtherIcon.jsx';

Импортировать все значки в Icons

import * as Icons from 'icons';

Вы можете получить компонент, используя имя в качестве ключа на Icons

const Icon = Icons[props.name];
return <Icon {...otherProps} />;
0 голосов
/ 29 ноября 2018

Неправильно полагаться на содержимое каталога в скрипте на стороне клиента, потому что его нет в комплекте приложений.

Надлежащим способом является наличие модуля "баррель", который реэкспортирует все подмодули:

icon-components / index.js 

export { default as FooIcon } from './foo-icon';
export { default as BarIcon } from './bar-icon';

И использовать его так: 

import * as icons from './icon-components';

...

for (const [iconComponentName, IconComponent] of Object.entries(icons)) { ... }

Имеет смысл генерировать index.js аналогично тому, как iconкомпоненты были сгенерированы, т.е. в среде Node.js, где есть доступ к файловой системе.svg-to-react-cli может быть разветвлен для этой цели, или это может быть отдельный скрипт.

...