将 props 发送到组件数组

Question

I have an array of components that I want to render, but I don't know how to send props to each of them. Do you have any idea how? I am using also using formik for form management and the page components consist of basic inputs.

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

and I am rendering them this way:

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

Answer 1

You can accomplish this by using React.cloneElement :

const newProps = {}

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

React.cloneElement

Answer 2

There are 2 options to achieve this:

Option 1: On the declaration site you may pass the state while initialising the array.

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

Or if you do not want or can not update the declaration you may pass when rendering: Or you can

Option 2: clone the component prop and apply the new props

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

Answer 3

Could you not initialise the component in the array?

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

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

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