Question

我想返回一个节点的倍数（不确定这是否是正确的术语）。

这个想法是一个评级系统。如果评分为5，那么我想返回5 <FontAwesome name='star' />

这实际上是在简历页面上。

import React, {Component} from 'react';
import FontAwesome from 'react-fontawesome';


class Summary extends Component {
    dot = 'circle';

    mapSummaryToLi(summaries) {
        return summaries.map((point, index) =>
            <li key={index}>{point}</li>
        )
    }

    mapSkillsToList(skills) {
        return skills.map((skill, index) =>
            <li key={index}>{skill.name}&nbsp;{this.numberToDots(skill.level)} </li>)
    }

    numberToDots(level) {
        let total = new Array(parseInt(level));

        return total.map(() => <FontAwesome name={this.dot}/>)
    }

    render() {
        return (
            <section id="summary">
                <div className="row">
                    <div className="col-sm-8">
                        <div className="heading">
                            Summary of Qualifications
                        </div>
                        <ul>
                            {this.mapSummaryToLi(this.props.summary)}
                        </ul>
                    </div>
                    <div className="col-sm-4">
                        <div className="heading">
                            Skills
                        </div>
                        <ul id="skills">
                            {this.mapSkillsToList(this.props.skills)}
                        </ul>
                    </div>
                </div>

            </section>
        )
    }
}

因为这只会返回黑色空格。我觉得很困惑。 skill.level是来自JSON的整数。

我正在寻找一种方法来返回多个节点。即。

return <FontAwesome name="circle"> * 3 //I know this does not work.

有什么想法吗？

Answer 1

虽然new Array(x)创建了一个长度为x的数组，但数组实际上并不包含任何值。 .map回调不会被称为＆＃34; hole＆＃34;。参见：

＆＃13;

console.log(Array(5).map(x => 42));

＆＃13;

您可以执行以下操作：

return Array.from(Array(5), () => <FontAwesome name={this.dot}/>);

＆＃13;

console.log(Array.from(Array(5), x => 42));

＆＃13;

反应返回多个节点

1 个答案: