Question

在我的react组件中，我正在接收一个元素作为道具。现在，我想在列表中再渲染9个元素。我该如何实现？可以通过Array.map（）实现吗？

function List(props) {
//here props.number = [1]

return (
  <ul>
  // Here I want to render list items 10 times. (without using for loop)
    {
      props.number.map(item => <li key={item}>{item}</li>)
    }
  </ul>
)
}

Answer 1

从数字中构造一个包含所需数字的新数组，然后.map并将其返回：

const [num] = props.number;
const arrToDisplay = Array.from({ length: 11 - num }, (_, i) => i + num);
return (
  <ul>
    {
      arrToDisplay.map(item => <li key={item}>{item}</li>)
    }
  </ul>
)

const getArr = (num) => {
  const arrToDisplay = Array.from({ length: 11 - num }, (_, i) => i + num);
  console.log(arrToDisplay);
};
getArr(1);
getArr(5);
getArr(10);

如何渲染jsx元素多于道具项目（数组）

1 个答案: