Как использовать переменную для возврата именованного импорта в React?

Question

Я хочу иметь возможность использовать значение переменной (генерируемой функцией карты) в качестве именованного объекта в фигурных скобках.Я новичок в React и ES6 (я учил себя в рамках проекта для домашних животных), поэтому, возможно, я не задаю вопрос правильно.

Я использую пакет NPM (response-icons-kit)это позволяет мне импортировать иконки шрифтов как модули React, которые затем отображаются как SVG.У меня есть файл JSON с объектами (каждый объект имеет: идентификатор, имя, категорию, описание, значок), и каждому объекту назначен связанный значок.

Когда я выполняю рендеринг модуля, я долженукажите значок, который я хочу использовать с фигурными скобками.Я использую функцию карты для обработки данных JSON для правильного отображения каждого объекта и хочу иметь возможность динамически создавать значок с помощью переменной карты {obj.icon}.

import Icon from 'react-icons-kit';
import { font, clock0, html5 } from 'react-icons-kit/fa';

...

// Sample data
array = [...{"name":"Some Name","icon":"font"},{"name":"Some 
Othername","icon":"html5"},{"name":"Another Name","icon":"clock0"}...]

...

// Should render an SVG icon when use with other code
var foo = array.map((obj) => {
    console.log(obj.icon) // correctly logs font html5 clock0

    return(
        {obj.icon} // prints the value of the var fine (font html5 clock0)
        <Icon icon={clock0}/> // manually specifying works
        <Icon icon={obj.icon}/> // using a variable gives error
    );
});

...

/*================
FULL CODE (SORRY)
=================*/
    import React, { Component } from 'react';
    import ScrollableAnchor from 'react-scrollable-anchor'
    import { TabContent, TabPane, Nav, NavItem, NavLink, Row, Col } from 'reactstrap';
    import { Media } from 'reactstrap';
    import Icon from 'react-icons-kit';
    import { font, clockO, html5 } from 'react-icons-kit/fa';

    class Skills extends Component {

        constructor(props) {
            super(props);

            this.state = {
                activeTab: 'Coding',
            };
            this.toggle = this.toggle.bind(this);
        }

        toggle(tab) {
            if (this.state.activeTab !== tab) {
                this.setState({
                    activeTab: tab
                });
            }
        }

        render() {
            // Skill Navigation
            let SkillNav = () => {
                let SkillNavItems = this.props.categories.map((category) => {
                    let active = (this.state.activeTab === category) ? "active" : "";
                    return (
                        <NavItem>
                            <NavLink
                                className={active}
                                onClick={() => { this.toggle(category); }}>
                                {category}
                            </NavLink>
                        </NavItem>
                    );
                });

                return (
                    <Nav pills vertical>
                        {SkillNavItems}
                    </Nav>
                );
            }
            // Different tabs of Skills
            var SkillTabs = () => {
                var SkillTab = this.props.categories.map((category) => {

                    // Separate objects by the category supplied to it
                    var SkillTabCategory = this.props.skills.filter(function (skill) {
                        return skill.category === category;
                    });
                    // Display a list of objects with the same categories
                    var SkillTabContent = SkillTabCategory.map((skill) => {
                        return (
                            <Media list>
                                <Media tag="li">
                                    <Media className="mr-5">
                                        <Icon icon={skill.icon} />
                                    </Media>
                                    <Media body>
                                        <Media heading>
                                            {skill.name}
                                        </Media>
                                        {skill.description}
                                    </Media>
                                </Media>
                            </Media>
                        );
                    });
                    return (
                        <TabPane tabId={category}>
                            <Row>
                                <Col sm="12">
                                    <h4>{category}</h4>
                                    {SkillTabContent}
                                </Col>
                            </Row>
                        </TabPane>
                    );
                });

                return (
                    <TabContent activeTab={this.state.activeTab}>
                        {SkillTab}
                    </TabContent>
                );
            }
            return (
                // Putting it all together
                <ScrollableAnchor id='skills'>
                    <div className="wrapper">
                        <div className="container">
                            <Row className="vh100 align-items-center">
                                <Col xs="4" sm="4">
                                    <SkillNav></SkillNav>
                                </Col>
                                <Col xs="12" sm="8">
                                    <SkillTabs></SkillTabs>
                                </Col>
                            </Row>
                        </div>
                    </div>
                </ScrollableAnchor>
            );
        }
    }

    export default Skills;

Answer 1

Если имена ваших значков происходят от вашего json означает динамически, то вам нужно сначала импортировать все значки из react-icons-kit, как.

import * as icons from 'react-icons-kit/fa';

Теперь вы можете использовать значки для извлечения времени выполнения значков, как

  const array = [{"name":"Some Othername","icon":"html5"}]
  export default ({ name }) => (
    <>
        {array.map((item)=>{
            return(
                <Icon icon={icons[item.icon]} />
            )
        })}
    </>
);

проверьте пример выполнения здесь Демо

Answer 2

Codesandbox

Инициализировать именованный импорт внутри функции конструктора с помощью this.font=font;this.html5=html5;.Затем визуализируйте его с помощью <Icon icon={this[obj.icon]} />