下面的代码有什么问题,它总是记录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>
);
}
}
答案 0 :(得分:0)
返回语句导致循环中断。
使用以下
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
}
答案 1 :(得分:0)
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;
};
返回一组链接