javascript - 如何渲染 jsx 元素多于 props 项(数组)

Question

在我的 react 组件中，我收到一个元素作为 Prop 。现在我想在列表中渲染另外 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);