反应组件无法按预期工作

Question

下面的代码有什么问题，它总是记录1。它在props中收到一个数字，我只想循环多次以返回链接列表。

import React from 'react';

const itemWidget = (props) => {

  let numItems = props.numItems;
  let itemList = itemMarkup(numItems);

  return (
    <div>

     { itemList } 

    </div>);
};

export default itemWidget;

const itemMarkup = (n) =>  {

  for (let i=1; i <= n ; i++) {
    console.log(i);
    return (
      <a href="#">{i}</a>
    );
  }
}

下面是传入数字的父组件的代码。

import React from 'react';
import itemWidget from '~/Components/itemWidget';

export default class Merchandise extends React.Component {
  constructor() {
    super();
  }

  render() {
    return (
     <div>
      <div className="merch-items">
        <ItemsWidget numItems={10}/>
      </div>
     </div>
    );
  }
}

Answer 1

for循环中的return语句导致循环中断。

使用以下

import React from 'react';
const itemWidget = (props) => {

  let numItems = props.numItems;
  let itemList = itemMarkup(numItems);

  return (
    <div>

     { itemList } 

    </div>);
};
const itemMarkup = (n) =>  {
  let itemList  = [];
  for (let i=1; i <= n ; i++) {
    itemList.push (
      <a href="#">{i}</a>
    );
  }

  return itemList
}

Answer 2

const itemMarkup = (n) =>  {
  let rows = []
  for (let i=1; i <= n ; i++) {
      console.log(i);
      rows.push(<a href="#">{i}</a>);
    // return (
    //   <a href="#">{i}</a>
    // );
  }

    return rows;
};

返回链接数组