代码之家 › 专栏 › 技术社区 › Roni Jack Vituli

创建JSX元素的数组,并将prop传递给每个元素

react-redux typescript reactjs

0

Roni Jack Vituli · 技术社区 · 3 年前

我是一个新的inreact框架。我想做的是创建JSX元素(Components)的数组例如:

import Intro from '../Introduction/Intro';
import Skills from '../Skills/Skills';

export const SECTIONS = [<Intro/>, <Skills/>]

const SomeComponent = () => {
const handler = () => {...}
return (
   <div className={classes.container}>
     <div className={classes.fields}>
       {SECTIONS.map((section, i) => {
        return <Fragment key={i}>{section /* for each element i want also pass prop */ }</Fragment>
     })}
     </div>
    <div className={classes.check}>...</div>
  </div>
   ) 
}

因此,我想将处理程序函数传递给数组中的每个元素

(<Intro foo={handler}/>)

有可能这样做吗?

1 回复 | 直到 3 年前

1

2

Youssouf Oumar 3 年前

是的,您可以这样做:

  export const SECTIONS = [Intro, Skills]
  const SomeComponent = () => {
    const handler = () => {...}
    return (
      <div className={classes.container}>
        <div className={classes.fields}>
          {SECTIONS.map((Section, i) => {
            return <Fragment key={i}><Section foo={handler}></Section></Fragment>
          })}
        </div>
        <div className={classes.check}>...</div>
      </div>
    )
  }