Компоненты L oop без массива

Question

В моем компоненте есть рендер, который отображает много компонентов, и я хочу, чтобы он повторил некоторые из них. У меня проблема, когда я создаю HTML рендер, переменная не обрабатывается и отображается в виде текста.

Фактический код содержит много других компонентов, но я упростил его

MY код

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;
}

Answer 2

Вы должны вернуть массив элементов:

const myLoop = (loopNumber, pageStart) => {
  return [...Array(loopNumber).keys()].map(v => <DiaryByDay key={v} loop={v} />);
};

Или

const myLoop = (loopNumber, pageStart) => {
    const html = [];
    for (let i = 0; i < loopNumber; i++) {
      html.push(<DiaryByDay key={i} loop={i} />);
    }
    return html;
  };

Демо :

const Fragment = React.Fragment;

function DiaryByDay(props) {
  return <div>DiaryByDay {props.loop}</div>
}

function App(props) {
  //const bookData = props.bookData;
  //const pageStart = props.pageStart;
  // Create Diary HTML
  const myLoop = (loopNumber, pageStart) => {
    return [...Array(loopNumber).keys()].map(v => <DiaryByDay key={v} loop={v} />);
  };

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


  return (
    dayByDayReturn
  );
}

ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

Answer 3

Вы добавляете строки, а не элементы React. Вам нужно добавить в массив:

export default function(props) {
  const bookData = props.bookData;
  const pageStart = props.pageStart;
  // Create Diary HTML
  const myLoop = (loopNumber, pageStart) => {
    const elements = [];
    for (let i = 0; i < loopNumber; i++) {
      elements.push(<DiaryByDay loop={i} key={i} />);
    }
    return elements;
  };

  const dayByDayPages = myLoop(3, 3);
  const dayByDayReturn = <> {dayByDayPages} </>;

  return dayByDayReturn;
}

Answer 4

Измените вашу функцию так, чтобы она возвращала массив:

 const myLoop = (loopNumber, pageStart) => {
    let html = [];
    for (let i = 0; i < loopNumber; i++) {
      let singleLoop = <DiaryByDay loop={i} />;
      html.push(singleLoop);
    }
    return html;
  };

Если вы вернете огромную строку, очевидно, она попытается отобразить строку.

И вы также должны добавить ключевую опору для каждого компонента DiaryByDay. Использование значения индекса может быть не очень хорошей идеей, потому что если вы позже удалите некоторые элементы в вашем массиве, индексы изменятся.

Так что let singleLoop = <DiaryByDay loop={i} />;

должно быть

let singleLoop = <DiaryByDay key={ ...something unique for each element} loop={i} />;

Answer 5

React печатает компонент в виде строки, поскольку вы сохраняете компонент в виде строки.

Вы можете сохранить компонент в массиве и затем отобразить его.

Попробуйте это.

export default function(props) {
    const bookData = props.bookData;
    const pageStart = props.pageStart;
    // Create Diary HTML
    const myLoop = (loopNumber, pageStart) => {
      let html = [];
     for (let i = loopNumber; i < pageStart; i++) {
        let singleLoop = <DiaryByDay loop={${i}} />;
        html.push(singleLoop);
      }
      return html;
    };
  const dayByDayPages = myLoop(1, 3);
  const dayByDayReturn = <Fragment> {dayByDayPages}  </Fragment>


    return (
      dayByDayReturn
    );
  }

Codesandbox Пример: