Reactjs 反应-如何使用常规for循环渲染多个按钮？

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

从“React”导入React；
常量键=（）=>{
常量renderKeys=（）=>{
//很好
var arr=[1,2,3,4,5,6,7,8,9]
返回arr.map（（val）=>{
返回{val}
})                 
};
常量renderKeys=（）=>{
//不起作用
for（var i=0；i当您在for循环中调用
return
时，它停止执行循环。这就是为什么您只返回第一个按钮

但是，在
.map（）
中调用
return
不会阻止循环迭代。相反，您可以使用
return
来明确定义希望在新数组中包含的内容

请注意，
.map（）
通过使用现有数组中的元素创建一个全新的数组。您可以随意使用这些元素，从而使其适合渲染JSX

例如：

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

const number=[1,2,3,4,5]
const numbers乘以2=数字。映射（（数字）=>{
返回{number*2}
})

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

工作代码：
从“React”导入React；
从“react dom”导入react dom；
导入“/styles.css”；
类应用程序扩展了React.Component{
getButtonsUsingMap=（）=>{
常量数组=[1,2,3,4,5]
返回数组.map（（数字）=>{
返回{number}
})
}
getButtonsUsingForLoop=（num）=>{
常量数组=[]
对于（var i=1；i
btw地图和for循环有什么区别

.map（）
迭代一个数组（仅限于数组），而for循环可以惰性地总结为一种更“通用”的循环机制，它独立于任何特定的数据类型

为什么for循环只渲染第一个元素（0），而map工作正常

因为您在for循环的第一次迭代中使用

constrenderkeys=（）=>{
//不起作用
对于（var i=0；iHi@javascripting，刚刚在下面为您提供了一个解决方案。如果您需要有关此主题的任何进一步解释，请告诉我：）
const numbers = [1, 2, 3, 4, 5]
const numbersMultipledByTwo = numbers.map((number) => {
   return <div>{ number * 2 }</div>
})

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 <button>{number}</button>
    })

  }

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

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

    return array
  }

  render(){
    return(
      <div>
        <h4>Using .map()</h4>
        {this.getButtonsUsingMap()}
        <h4>using for-loop</h4>
        {this.getButtonsUsingForLoop(5)}
      </div>
    )
  }
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);