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

我正在处理如何使用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）

如果我们有条件datepike，我们只需替换为：

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

Esto不打算完成以下任务：

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

              *** condition *** if input or datepike

           </FormItem>
           </Fragment>


          ))}
        </div>

{data.map（（值）=>(
***条件***如果输入或日期为
))}

---

您知道如何完成此操作吗？

您可以使用十进制操作：

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

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


       </FormItem>
       </Fragment>


      ))}
</div>

{data.map（（值）=>(
{value.tipo==“输入”？：}
))}

您可以使用十进制操作：

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

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


       </FormItem>
       </Fragment>


      ))}
</div>

{data.map（（值）=>(
{value.tipo==“输入”？：}
))}

您可以在

tipo

上添加

&&

条件并相应地进行渲染

<div>
  {data.map(({ label, tipo, name, defaultValue, placeholder }) => (
    <Fragment>
      <FormItem label={label}>
        {tipo === "input" && (
          <Input
            name={name}
            placeholder={placeholder}
            defaultValue={defaultvalue}
          />
        )}
        {tipo === "datepiker" && (
          <DatePicker name={name} defaultValue={moment(defaultValue)} />
        )}
      </FormItem>
    </Fragment>
  ))}
</div>

{data.map（{label，tipo，name，defaultValue，placeholder}）=>(
{tipo===“输入”&&(
)}
{tipo===“datepiker”&(
)}
))}

您可以在

tipo

上添加

&&

条件并相应地进行渲染

<div>
  {data.map(({ label, tipo, name, defaultValue, placeholder }) => (
    <Fragment>
      <FormItem label={label}>
        {tipo === "input" && (
          <Input
            name={name}
            placeholder={placeholder}
            defaultValue={defaultvalue}
          />
        )}
        {tipo === "datepiker" && (
          <DatePicker name={name} defaultValue={moment(defaultValue)} />
        )}
      </FormItem>
    </Fragment>
  ))}
</div>

{data.map（{label，tipo，name，defaultValue，placeholder}）=>(
{tipo===“输入”&&(
)}
{tipo===“datepiker”&(
)}
))}