Typescript 如何通过循环多次返回 HTML 元素？答案

【问题标题】：Typescript how can I return an HTML element multiple times with a loop?Typescript 如何通过循环多次返回 HTML 元素？
【发布时间】：2021-10-17 05:29:18
【问题描述】：

我是 Typescript 的新手，我想创建一个函数，返回带有数组中数据的几个按钮，我尝试使用这样的 for 循环来实现：

    splitLabels(Array: any){
        if (typeof Array != "undefined" && Array != null 
        && Array.length != null && Array.length > 0) {
            
            var labels;
            
            for(let i = 0; i<Array.length; i++){
                labels = <button className='labels'>{Array[i]}</button>;
                
            return labels;
            }       
        }
    }

这不起作用，因为它只返回第一个索引。于是在网上找了一些思路，发现可以用Array.map，但是对我不起作用。

            Array.map(functions(Array,i){
                return <button className='labels'> {Array} </button>;
            }

【问题讨论】：

只是一个建议：不要以第一个字母为大写命名参数。 Array 也是一个“类”（或函数，等等），如果你“覆盖它”，它会变得混乱
另外，为“不适合我”添加更详细的描述。我的意思是，尚不清楚您如何将Array.map 应用于其余代码以及“不起作用”是什么意思

标签： arrays reactjs typescript dictionary element

【解决方案1】：

在您的 for 循环中，您必须将元素存储在一个数组中并返回它；

 splitLabels(Array: any){
        if (typeof Array != "undefined" && Array != null 
        && Array.length != null && Array.length > 0) {
            
            const labels = [];
            
            for(let i = 0; i<Array.length; i++){
                labels.push(<button className='labels'>{Array[i]}</button>)
            } 
            return labels;      
        }
    }

使用Array.map():

      return Array.map((text) => (
            <button className='labels'> {text} </button>;
      )

【讨论】：

感谢它的工作，但 text 指的是什么？
数组元素，我只是将其设为“文本”以防止混淆，因为您的数组被命名为“数组”