给定一个数字，如何渲染多个 html 元素？答案

【问题标题】：Given a number, how to render multiple html element?给定一个数字，如何渲染多个 html 元素？
【发布时间】：2020-12-10 13:16:07
【问题描述】：

我想将 props noOfIcons 传递给我的 ChartLegend 组件，如果没有 noOfIcons 值，那么我想渲染给定数量的图标。因此，如果 noOfIcons = 2 则渲染 2 <Icon/>。我尝试了以下方法，但它始终只呈现 1 <Icon/>，我错过了什么？＆如果有一个简单的方法来处理这个请建议。非常感谢。

 <ChartLegend iconName={"square-full"} noOfIcons={2} label={'label'} />

const ChartLegend = props => {

    const { iconName, label, noOfIcons = 2 } = props;

    const renderIcons = () => {

        if (!noOfIcons) {
            return <Icon
                name={iconName}
                type='solid'
            />;
        }
        else {
            for (let i = 0; i < noOfIcons; i++) {
                return <Icon
                    name={iconName}
                    type='solid'
                />;
            }
        }
    };

    return (
        <Col> 
            {renderIcons()} 
            {label}
        </Col>
    );
};

export default ChartLegend;

【问题讨论】：

标签： javascript reactjs loops

【解决方案1】：

您需要返回一个数组来呈现多个元素。所以在你的其他部分，

{
          const arr = [];
            for (let i = 0; i < noOfIcons; i++) {
                arr.push( <Icon
                    name={iconName}
                    type='solid'
                />);
            }
         return arr;
        }

这样的东西可以工作。

【讨论】：

【解决方案2】：

您可以创建一个n 元素数组并对其进行迭代以呈现图标元素。如果 noOfIcons 等于 0 则创建一个包含一个元素的数组：

<Col> 
    {[...Array(noOfIcons || 1)].map((_, index) => 
      (<Icon name={iconName} type='solid' key={`solid_icon_${index}`} />))} 
    {label}
</Col>

【讨论】：

【解决方案3】：

您可以使用数组映射方法来呈现多个图标。

通常，当您使用 react 渲染多个相同类型的组件时，您会使用 map 方法。

const ChartLegend = props => {

    const { iconName, label, noOfIcons = 2 } = props;

    const renderIcons = () => {

        if (!noOfIcons) {
            return <Icon
                name={iconName}
                type='solid'
            />;
        }
        else {
            Array(noOfIcons)
                .fill(0)
                .map((v,i) =>{
                   return <Icon
                       key={i}
                       name={iconName}
                       type='solid'
                   />;
           })
        }
    };

    return (
        <Col> 
            {renderIcons()} 
            {label}
        </Col>
    );
};

export default ChartLegend;

这将是一种更短且更具可读性（在我看来）的方式：

    const renderIcons = () => {
        return(
           Array(noOfIcons? noOfIcons: 1)
               .fill(0)
               .map((v,i) =>{
                   return <Icon
                       key={i}
                       name={iconName}
                       type='solid'
                   />;
           })
        );
    };

【讨论】：

【解决方案4】：

const ChartLegend = props => {

   const { iconName, label, noOfIcons = 2 } = props;

   const renderIcons = () => Array(noOfIcons)
            .fill(0)
            .map(e => (<Icon
                name={iconName}
                type='solid'
            />));
    
  return (
    <Col> 
        {renderIcons()} 
        {label}
    </Col>
   );
};

export default ChartLegend;

使用Array.map。

【讨论】：

【解决方案5】：

你需要使用地图。

替换这个

for (let i = 0; i < noOfIcons; i++) {
                return <Icon
                    name={iconName}
                    type='solid'
                />;
            }

与

return noOfIcons.map(()=> (<Icon name={iconName} type='solid' />)

【讨论】：