Javascript 由于未启动文本和组件，因此反应代码呈现

我创建了一个名为“componentRepeater”的组件，它的工作是呈现子组件的多个实例。“componentRepeater”包含的道具包括子组件的道具、子组件的重复次数以及子组件的字符串（包括道具）

我遇到的问题是，一旦字符串完成，它就会呈现为文本，因此组件“componentRepeater”没有加载所需的子组件

这是启动名为“componentRepeater”的组件的代码

这是名为“componentRepeater”的组件的代码

import React，{Fragment}来自'React'；
从“../layout/page table two column”导入时间线
从“../layout/page table two column”导入PageTableTwoColumn
导出默认功能（道具）{
const multiplayer=props.multiplayer
const childrenComponent=props.childrenComponent
常量myRender=（道具）=>{
var i；
var myOutput=props
对于（i=0；i

看起来您应该在返回中调用

myRender（）

：

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

返回(
{myRender（）}
);

去掉您的孩子组件中的引号， 我想应该是这样的

childrenComponent={<PageTableTwoColumn bookFormat={props.bookFormat} data={timelineP2}/>}

childrenComponent={}

我认为这种方法对于那种场景来说是一种过分的手段 请看一下此方法，它可以多次重复一个组件 首先，我们创建一个具有重复次数长度的数组，然后通过

map（）

在该数组上创建一个新的

jsx

组件数组，并返回我们想要复制的组件；（最好将子组件包装在父组件中，然后通过

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

函数ChildComponent（）{
返回(
嘿，我是一个组件！
)
}
函数App（）{
//5是一个例子，你可以使用一些道具来启动它；
重复次数=5次；
返回(
一个非常漂亮的头球

{[…新数组（重复）].map（=>）}
);
}

为什么要将

子组件作为字符串传递？
childrenComponent={<PageTableTwoColumn bookFormat={props.bookFormat} data={timelineP2}/>}

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

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