javascript - React 代码呈现为文本和组件未启动

Question

我创建了一个名为“componentRepeater”的组件，它的工作是呈现子组件的多个实例。 “componentRepeater”包含的 Prop 包括子组件的 Prop 和子组件的重复次数以及子组件的字符串(包括 Prop )。
我遇到的问题是，一旦字符串完成，它就会呈现为文本，因此组件“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>
  );
}