React-如何使用常规的for循环渲染多个按钮？

抱歉，如果它非常基础，但是：在迭代中渲染多个按钮（0-9）时-btw map和for loop有什么区别？为什么map可以正常工作，所以for循环仅呈现第一个元素（0）？为什么我必须首先将按钮按入数组，然后将其返回（如其他示例所示）？我可以使用常规的for循环和渲染按钮，而不必将其推入Arary吗？谢谢！

 import React from 'react';

    const Keys = () => {        
       const renderKeys = () => {
         //works fine
          var arr = [1,2,3,4,5,6,7,8,9]
          return arr.map((val) => {
              return {val}
            })                 
        };

        const renderKeys = () => {       
              //does not work    
              for (var i=0; i<10; i++) {
               return {i}
            }
        };

        return (
            

                {renderKeys()}
            
        )
    };

Christopher .. 5

在returnfor循环内调用时，它将停止执行循环。这就是为什么您只返回第一个按钮的原因。

但是，return在a内部调用.map()不会停止循环的迭代。相反，您可以使用return显式定义要在新数组中包含的内容。

请注意，.map()使用现有数组中的元素创建一个全新的数组。您可以随意使用任何元素，使其适合呈现JSX。

例：

const numbers = [1, 2, 3, 4, 5]
const numbersMultipledByTwo = numbers.map((number) => {
   return 
{ number * 2 }
})

从理论上讲，您可以使用for循环来实现相同的效果，但是这也需要第二个数组的帮助。

工作代码：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component{
  getButtOnsUsingMap= () => {
    const array = [1, 2, 3 ,4, 5]

    return array.map((number) => {
      return {number}
    })

  }

  getButtOnsUsingForLoop= (num) => {
    const array = []

    for(var i = 1; i <= num; i++){
      array.push({i})
    }

    return array
  }

  render(){
    return(
      

        
Using .map()
        {this.getButtonsUsingMap()}
        
using for-loop
        {this.getButtonsUsingForLoop(5)}
      
    )
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

在该getButtonsUsingForLoop 功能中，您可以看到有使其工作的更多明确要求。首先，我们需要满足论点。然后初始化一个新数组。然后为循环定义边界。迭代并将JSX推送到空数组。然后最后返回该数组。因此逻辑不是很简洁。

另一方面，a .map()本质上可以处理所有这些。只要您有一个预先存在的数组就可以迭代（99％的时间您将要处理某种状态或props-array。）

看到沙箱：https : //codesandbox.io/s/pensive-leftpad-lt5ml

在returnfor循环内调用时，它将停止执行循环。这就是为什么您只返回第一个按钮的原因。

但是，return在a内部调用.map()不会停止循环的迭代。相反，您可以使用return显式定义要在新数组中包含的内容。

请注意，.map()使用现有数组中的元素创建一个全新的数组。您可以随意使用任何元素，使其适合呈现JSX。

例：

const numbers = [1, 2, 3, 4, 5]
const numbersMultipledByTwo = numbers.map((number) => {
   return 
{ number * 2 }
})

从理论上讲，您可以使用for循环来实现相同的效果，但是这也需要第二个数组的帮助。

工作代码：

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

class App extends React.Component{
  getButtOnsUsingMap= () => {
    const array = [1, 2, 3 ,4, 5]

    return array.map((number) => {
      return {number}
    })

  }

  getButtOnsUsingForLoop= (num) => {
    const array = []

    for(var i = 1; i <= num; i++){
      array.push({i})
    }

    return array
  }

  render(){
    return(
      

        
Using .map()
        {this.getButtonsUsingMap()}
        
using for-loop
        {this.getButtonsUsingForLoop(5)}
      
    )
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

在该getButtonsUsingForLoop 功能中，您可以看到有使其工作的更多明确要求。首先，我们需要满足论点。然后初始化一个新数组。然后为循环定义边界。迭代并将JSX推送到空数组。然后最后返回该数组。因此逻辑不是很简洁。

另一方面，a .map()本质上可以处理所有这些。只要您有一个预先存在的数组就可以迭代（99％的时间您将要处理某种状态或props-array。）

看到沙箱：https : //codesandbox.io/s/pensive-leftpad-lt5ml