Typescript 如何通过循环多次 return 一个 HTML 元素？

Question

我是 Typescript 的新手，我想创建一个函数，returns 几个按钮和数组中的数据，我尝试使用这样的 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;
            }       
        }
    }

这行不通，因为它 returns 只是第一个索引。所以我在网上寻找了一些想法，发现我可以使用 Array.map，但它对我不起作用。

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

Answer 1

在 for 循环中，您必须将元素存储在一个数组中，然后 return 它；

 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>;
      )

Typescript 如何通过循环多次 return 一个 HTML 元素？

Typescript how can I return an HTML element multiple times with a loop?

arrays

dictionary

element

typescript

reactjs