javascript - Reactjs，使用map从数组生成JSX元素

Question

我正在处理如何使用map在React组件的返回中生成JSX元素。我正在尝试制作动态表单，源是给定的数组:

我有两种类型的表单，关键“tipo”是条件

包含数据的数组:

let data = [
  { tipo: "input",
    label: "label1",
    name: "name1",
    placeholder: "placeholder1",
    defaultValue: "defaulvalue1",
  },
  { tipo: "datepiker",
    label: "label2",
    name: "name2",
    placeholder: "placeholder2",
    defaultValue: "defaulvalue2",
  },

];

默认的普通代码是:(表单类型:input)。

        <FormItem label="labe1">
          <Input name="name1" placeholder="placeholder1" defaultValue=defaultvalue1 />
        </FormItem>

如果我们有一个条件日期pike，我们只需替换为:

<DatePicker name="name"  defaultValue={moment("defaultvalue1")} />

这就是不完整的意图:

        <div>
          {data.map((value) => (
            <Fragment>
            <FormItem label={value.label}>

              *** condition *** if input or datepike

           </FormItem>
           </Fragment>


          ))}
        </div>

知道如何完成这个任务吗？

Answer 1

您可以使用三元运算符:

<div>
      {data.map((value) => (
        <Fragment>
        <FormItem label={value.label}>

          {value.tipo === "input" ? <Input name="name1" /> : <DatePicker name="name"/>}


       </FormItem>
       </Fragment>


      ))}
</div>