Как визуализировать один элемент массива на основе реквизита имени в React - PullRequest
Новая
       37

Как визуализировать один элемент массива на основе реквизита имени в React

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

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

Благодаря предыдущей помощи удалось отобразить несколько компонентов значков в моем проекте React.За исключением того, что я не хочу, чтобы все они воспроизводились одновременно, а только тот, который я называю, на основе имени.Я немного сбит с толку относительно того, где я должен передавать реквизит, чтобы достичь того, чего я хочу.Я пытался работать с «переключателем / делом», как вы можете видеть в заголовке « То, что я пробовал », но я не знаю, как зациклить несколько дел.

Что у меня есть

App.js 

import React, { Component } from 'react';
import './App.css';
import Icon from  './library/icons/Icon';
class App extends Component {
    render() {
        return (
               <div className='App'>
                   <Icon iconName='Icon1' />
                </div>
        );
    }
}
export default App;

Icon.js 

import React from 'react';
import * as icons from './icons' 

function IconList({iconName}) {

    const GetIcons = [];
    for (const [name, icon] of Object.entries(icons)) {
        GetIcons.push({name, icon})
    }
    const MapIcons = GetIcons.map(({name, icon}) => {
        return (
            <div>{name} {icon()}</div>
        )
    });
    console.log(GetIcons)
    return (
        <div>{MapIcons}</div>
    )
}
const Icon = ({iconName}) => (
    <IconList />
);

export default Icon;

Что это делает

Это теперь отображает все компонентов SVG, которые я импортирую.Моя стрелка MapIcons выполняет цикл и отображает имя компонентов и функцию, отображающую значок svg.

Что я хочу достичь

  • Вызов только одногозначок, основанный на значке iconName (как показано в App.js)
  • Имеет список реквизитов, таких как 'fill =' currentColor ', которые я передаю своим значкам.

Что япробовал

Я пытался зациклить внутри коммутатора, чтобы у меня была каждая функция как случай.Но я уже не знал, что делать, чтобы передать реквизит функции. 

function IconList({}) {

    const GetIcons = [];
    for (const [name, icon] of Object.entries(icons)) {
        GetIcons.push({name, icon})
    }
    const SwitchIcons = (iconName, props) => {
        switch (iconName) {
            const MapIcons = GetIcons.map(({name, icon}) => {
                case {name}:
                    return (
                        {icon()}
                    )
            });
        }
    )
}

const Icon = ({
  iconName = '',
  stroke = 'currentColor',
  strokeLinecap = 'round',
  strokeLinejoin = 'round',
  strokeWidth = '3px',
  fill = 'currentColor',
  viewBox = '0 0 100 100',
  width = '100px',
  className = 'icon icon' + name,
  height = '100px'
}) => (
  <div className={className}>
   {SwitchIcons(iconName, { stroke })}
  </div>
);

export default Icon;

1 Ответ

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

for оператор был указан в этот ответ только для примера того, как записи значков могут быть повторены, нет необходимости помещать элементы в другой массив, потому что Object.entries уже возвращает массив.switch оператор необходим только при наличии явных условий для перечисления. 

const Icon = (/*...*/) => {
  const IconComponent = icons[iconName];
  <div className={className}>
   {IconComponent && <IconComponent stroke={stroke} />}
  </div>
};

export default Icon;

Данный icons объект содержит карту компонентов, IconList, GetIcons и SwitchIcons не нужны.

...