如何在 javascript 中循环返回语句

Question

在 jsx 中的本机反应中，我希望 function 返回这样的循环，我正在这样做，但我的代码在这种情况下说无法访问。

<View>
  {()=>{
   return ( for(var i=0;i<5;i++){
               <Text>Hello World</Text>
          })
   }}
</View>

Answer 1

你只能渲染一个 React 元素。

这是一个简单的示例，尽管几乎没有使用for循环。

let content = [];
for (let i = 0; i < 5; i++) {
  content.push(<h1>Hello World using for loop</h1>);
}

const App = () => {
  return (
    <div>
      {content}
      {[...Array(5).keys()].map((key) => (
        <h1 key={key}>Hello World using map</h1>
      ))}
    </div>
  );
};

Answer 2

使用 map 而不是循环。

Array.from({ length: 5 }).map((v) => <Text key={v}>{v}</Text>)

Answer 3

许多解决方案：

1. 编写 5x Hello world

// Function

getList(){
    let texts = []
    for (let index = 0; index < 5; index++) {
        texts.push(<Text>Hello World</Text>)
    }
    return texts
}

// 使成为

<View>
    {this.getList()}
</View>

2. 映射值数组

// 大批

const list = [
    "Hello World",
    "Ad adipisicing ea ut in officia.",
    "Consectetur ipsum commodo reprehenderit sit est aliquip commodo ad qui duis et exercitation.",
    "Est sint esse veniam laborum cillum ullamco aliquip aute eiusmod cupidatat."
]

// 使成为

<View>
    {list.map((text, index) => <Text key={index}>{text}</Text>)}
</View>