javascript - 不带数组的循环组件

Question

我的组件中有一个渲染器，可以渲染出许多组件，并且我希望它重复其中的一些组件。我遇到的问题是，当我创建 HTML 渲染时，变量没有被处理，而是显示为文本。

实际代码包含更多组件，但我已对其进行了简化

我的代码

export default function(props) {
  const bookData = props.bookData;
  const pageStart = props.pageStart;
  // Create Diary HTML
  const myLoop = (loopNumber, pageStart) => {
    let html = '';
    for (let i = 0; i < loopNumber; i++) {
      let singleLoop = `<DiaryByDay loop={${i}} />`;
      html = html + '  ' + singleLoop;
    }
    return html;
  };

const dayByDayPages = myLoop(1, 3);
const dayByDayReturn = <Fragment>  {dayByDayPages}  </Fragment>
console.log(dayByDayReturn)


  return (
    dayByDayReturn
  );
}

这就是我运行代码时的样子

Answer 1

您应该使用 JSX 元素作为返回类型

export default function(props) {
  const bookData = props.bookData;
  const pageStart = props.pageStart;
  // Create Diary HTML
  const myLoop = (loopNumber, pageStart) => {
    return [...new Array(loopNumber)].map(i => <DiaryByDay loop={i} />);
  };

  const dayByDayPages = myLoop(1, 3);
  const dayByDayReturn = <Fragment> {dayByDayPages} </Fragment>;
  console.log(dayByDayReturn);
  return dayByDayReturn;
}