React Code рендеринг, поскольку текст и компоненты не инициируются

Question

Я создал компонент под названием "componentRepeater", задачей которого является рендеринг нескольких экземпляров дочерних компонентов. Подставки, которые содержит "componentRepeater", включают в себя подпорки для дочерних компонентов и количество повторов дочернего компонента и строку (включая подпорки) для дочернего компонента.

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

Этот код инициирует компонент с именем componentRepeater

<ComponentRepeater 
  bookFormat={props.bookFormat} 
  data={timelineP2} 
  multiplayer='5' 
  childrenComponent='<PageTableTwoColumn bookFormat={props.bookFormat} data={timelineP2} />'
/> 

Это код для компонента под названием "componentRepeater"

import React, { Fragment } from 'react';
import Timeline from '../layout/page-table-two-column'
import PageTableTwoColumn from '../layout/page-table-two-column'


export default function(props) {

  const multiplayer =  props.multipalyer
  const childrenComponent = props.childrenComponent

  const myRender = (props) => {
    var i;
    var myOutput = props
    for (i = 0; i < multiplayer-1; i++) {
      myOutput = myOutput + props
    }
    return (myOutput)
  }

  return (
    <Fragment>
      {myRender}
    </Fragment>
  );
}

Answer 1

Я думаю, что этот подход является избыточным для этого сценария, чувак: D взгляните на этот метод для повторения компонента несколько раз, сначала мы создаем массив с длиной числа повторений, затем мы создаем новый массив jsx компоненты map() в этом массиве и возвращают компонент, который мы хотим реплицировать; (лучше обернуть дочерний компонент в родительский и затем получить к нему доступ через props.children вместо передачи его в виде строки.)

...
<ComponentRepeater 
  bookFormat={props.bookFormat} 
  data={timelineP2} 
  multiplayer='5' 
> 
  <PageTableTwoColumn bookFormat={props.bookFormat} data={timelineP2} />
</ComponentRepeater>
...

и затем внутри ретранслятора

//inside the jsx block
{[...new Array(repeats)].map( _ => props.children)}

---

и вот пример того, как использовать этот подход:

function ChildComponent(){
  return (
    <span>hey I'm a component!</span>
  )
}

function App() {
  // 5 is an example you can use some props to initiate it;
  let repeats = 5;
  return (
    <div className="App">
      <header className="App-header">
        <p>A really nice header</p>
      </header>
      {[...new Array(repeats)].map( _ => <ChildComponent key={Math.random()}/>)}
    </div>
  );
}

Answer 2

Похоже, вы должны позвонить myRender() в ответ:

  return (
    <Fragment>
      {myRender()}
    </Fragment>
  );

Answer 3

вычеркни цитаты из твоих детей. Я думаю, что это будет так