Question

我希望能够将变量的值（由映射函数生成）用作花括号中的命名对象。我是React和ES6的新手（通过一个宠物项目教自己），所以我可能没有正确地问这个问题。

我正在使用NPM软件包（react-icons-kit），该软件包允许我将字体图标导入为React模块，然后将其渲染为SVG。我有一个带有对象的JSON文件（每个对象都有：id，名称，类别，描述，图标），并且每个对象都分配有一个相关的图标。

渲染模块时，必须指定要与花括号一起使用的图标。我正在使用地图函数来处理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

Codesandbox

使用this.font=font;this.html5=html5;初始化构造函数中的named-import。然后使用<Icon icon={this[obj.icon]} />

进行渲染

Answer 2

如果您的图标名称来自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]} />
            )
        })}
    </>
);

在此处Packer file provisioner doc

检查运行示例

如何在React中使用变量返回命名的导入？

2 个答案: