Javascript 向组件阵列发送道具

我有一个组件数组，我想渲染，但我不知道如何发送道具给每一个。你知道怎么做吗？我还使用formik进行表单管理，页面组件由基本输入组成

const pages = [<Page1 />, <Page2 />, <Page3 />, <Page4 />]

const pages=[，]

我用这种方式呈现它们：

<div>{pages[state]}</div>

{pages[state]}

实现这一点有两个选项：

选项1：在声明站点上，您可以在初始化数组时传递状态

const pages = [<Page1 props={page1Prop: 'value'}/>, 
               <Page2 props=page2Props />, 
               <Page3 props=page3Props />, 
               <Page4 props=page4Props />]

const pages=[,，
, 
, 
]

或者，如果不希望或无法更新呈现时可能传递的声明： 或者你可以

选项2：克隆组件道具并应用新道具

  ...
  render() {
    return (
      <div>
        {React.cloneElement(pages[currentPage] propsForPage[currentPage])}
        OR
        {React.cloneElement(pages[currentPage] {someProp:'value'})}
      </div>
  );
 }
}

。。。
render（）{
返回(
{React.cloneElement（pages[currentPage]propsForPage[currentPage]））
或
{React.cloneElement（页面[currentPage]{someProp:'value'}）}
);
}
}

您可以通过使用

React.cloneElement

来实现这一点：

const newProps = {}

<div>{React.cloneElement(pages[state], newProps)}</div>

constnewprops={}
{React.cloneElement（页面[状态]，newProps）}

---

您不能初始化阵列中的组件吗

const pages = [Page1, Page2, Page3, Page4]

return (
  <div>
    {pages.map(page => {
      const Component = <page />

      return (
        <Component {...props} />
      )
     }
  </div>
)

const pages=[Page1，Page2，Page3，Page4]
返回(
{pages.map（页面=>{
常数分量=
返回(
)
}
)

只需传递数组声明中的道具？es

const pages=[，…]