Question

这是一个反应项目，下面的代码是jsx。代码我试图在下面干涸。它工作正常但很长！

const rightIcons = (
            <div>
                <a href="#">
                    <FontIcon
                        className="material-icons"
                        style={iconStyles}
                        onClick={() => this.props.scrollCallback('frontend')}
                    >
                        important_devices
                    </FontIcon>
                </a>
                <a href="#">
                    <FontIcon
                        className="material-icons"
                        style={iconStyles}
                        onClick={() => this.props.scrollCallback('backend')}
                    >
                        dns
                    </FontIcon>
                </a>
                <a href="#">
                    <FontIcon
                        className="material-icons"
                        style={iconStyles}
                        onClick={() => this.props.scrollCallback('withCare')}
                    >
                        favorite
                    </FontIcon>
                </a>
        ...
            </div>
        );

这是我尝试循环播放

const iconFields = [
        { icon: 'important_devices', component: 'frontend' },
        { icon: 'dns', component: 'backend' },
        { icon: 'favorite', component: 'withCare' },
        { icon: 'code', component: 'projects' },
        { icon: 'face', component: 'contact' }
    ];
{iconFields.map(function(icon, i) {
                    return (
                        <a href="#" key={i}>
                            <FontIcon
                                className="material-icons"
                                style={iconStyles}
                                onClick={() => this.props.scrollCallback(icon.component)}
                            >
                                {icon.icon}
                            </FontIcon>
                        </a>
                    );
                })}

我尝试过“icon.component”几种不同的方法，但它总是会导致错误。 “icon.icon”工作正常

Answer 1

任何有类似问题的人的最终代码。感谢Prakash sharma！

const iconFields = [
            { icon: 'important_devices', component: 'frontend' },
            { icon: 'dns', component: 'backend' },
            { icon: 'favorite', component: 'withCare' },
            { icon: 'code', component: 'projects' },
            { icon: 'face', component: 'contact' }
        ];
        const rightIcons = (
            <div>
                {iconFields.map((icon, i) => {
                    return (
                        <a href="#" key={i}>
                            <FontIcon
                                className="material-icons"
                                style={iconStyles}
                                onClick={() => this.props.scrollCallback(icon.component)}
                            >
                                {icon.icon}
                            </FontIcon>
                        </a>
                    );
                })}

尝试干掉此反应代码时出错（jsx）

1 个答案: