reactjs - React - 如何使用常规 for 循环呈现多个按钮？

Question

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

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

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

        return (
            <div>
                {renderKeys()}
            </div>
        )
    };

Answer 1

当您在 for 循环中调用 return 时，它会停止执行循环。这就是为什么您只返回第一个按钮的原因。

但是，在 .map() 中调用 return 不会停止循环迭代。相反，您可以使用 return 明确定义您希望在新数组中拥有的内容。

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

例子:

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

理论上，您可以使用 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 <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);

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

而另一方面，.map() 基本上可以处理所有这些。只要你有一个预先存在的数组来迭代(99% 的时间你将处理某种状态或 Prop 数组。)

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