reactjs - 如何在我的动态组件中传递道具

Question

我正在做这个完全动态的渲染，我有一个问题，在标题和副标题道具中，我想传递一个在地图中的值，我不想通过硬编码，但我不知道如何我可以通过它。

   interface Props {
  questions:any[]
}

interface OptionsSurveys {
  [key: string]: JSX.Element;
}

const FindSurveyComponents: React.FC<Props> = props => {
  const { questions } = props
  const components: OptionsSurveys = {
    'star-rating': <StarRating 
      title={'Lorem Ipsum is simply dummy text of the printing and typesetting industry.?'}
      subtitle={'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s'}
    />,
    'slider-grade': <SliderGrade
      title={'Lorem Ipsum is simply dummy text of the printing and typesetting industry.?'}
      subtitle={'Lorem Ipsum has been the industry's standard dummy text ever since the 1500s'}
    />,
    'default': <Textarea
      title={'Lorem Ipsum is simply dummy text of the printing and typesetting industry.?'}
    />
  }

  const mappingComponents = () => {
    return (
      questions.map((question:any) => {
        const SurveyComponent = components[question.style]
        return SurveyComponent
      })
    )
  }

  return (
    <Fragment>
      {questions && mappingComponents()}
    </Fragment>
  )
}

更新：

我设法像这样更改它，现在我可以将道具发送到每个组件，我只怀疑放置它的类型，放任何

  const components: any = {
    'star-rating': StarRating,
    'slider-grade': SliderGrade,
    'default': Textarea
  }

  const mappingComponents = () => {
    return (
      questions.map((question:any, index:number) => {
        const SurveyComponent = components[question.style]
        return <SurveyComponent key={index} />
      })
    )
  }

标签： reactjs