使用map函数创建React组件 为StringAttributeModel渲染标签组件

调整方案 #

你可以先过滤出目标类型的数组项，再遍历渲染组件，调整后代码如下：

{object.attributeCollection.questions
  // 过滤出仅StringAttributeModel类型的项
  .filter(question => question.constructor.name === 'StringAttributeModel')
  // 遍历渲染组件，同时传递对应标签内容
  .map((stringQuestion, index) => (
    // key优先使用项自身的唯一id，没有的话可暂时用index
    <FirstRepeatAttributeLabelAssistant 
      key={stringQuestion.id ?? index} 
      // 标签字段名根据你实际的模型结构调整即可，示例为label字段
      label={stringQuestion.label} 
    />
))}

可选调整说明 #

• 如果项目内有自定义的类型判断字段，可替换过滤逻辑，比如改为 .filter(question => question.type === 'string')，适配性更强
• 若组件不需要接收标签prop，直接删除对应prop属性即可，过滤逻辑不变，仍会只渲染3个对应组件

内容的提问来源于stack exchange，提问作者cts