主页 / 问题 / 802844
Accepted
Igor
Asked:2020-03-22 06:03:03 +0000 UTC2020-03-22 06:03:03 +0000 UTC

如何在反应中使用

  • 772

有一个组件接受一个数字并渲染适当数量的星星。

我这样做的方式不是很方便而且相当悲伤。

function Stars({count}) {
  let star = [];
  for (let i = 0; i < count; ++i) {
      star.push(i)
  }

  let items = star.map(item => <li key={item}><Star /></li>);

  return <ul>{items}</ul>;
}

我想这样做：

function Stars({count}) {
  let items = null;
  for (let i = 0; i < count; ++i) {
      items += <li key={i}><Star /></li>;
  }

  return <ul>{items}</ul>;
}

是的，我只得到null[object Object]而不是星号。

如何react实现我想要的逻辑或尽可能简化第一个选项？

reactjs

1 个回答

  1. Best Answer

    选择：

    function Stars({count}) {
  let star = [];

  for (let i = 0; i < count; ++i) {
    star.push(i)
  }

  return (
    <ul>
      {star.map(item => <li key={item}><Star /></li>)}
    </ul>
  );
}

    function Stars({count}) {
  let items = [];

  for (let i = 0; i < count; ++i) {
    items.push(<li key={i}><Star /></li>);
  }

  return <ul>{items}</ul>;
}

    function Stars({count}) {
  return (
    <ul>
      {Array(count).fill().map((x,i) => <li key={i}><Star /></li>)}
    </ul>
  );
}
    • 1

相关问题