javascript - 尝试根据 FieldArray React JS 内部的条件渲染字段

Question

我试图根据传递给组件的条件渲染字段，如下所示

  return (
<FieldArray name={`spaceType.mechanicalData.${mappedLibrarySourceArray}`}>
  {({ fields }) => {
    const dataSource = fields.map((name, index) => ({
      rowKey: index,
      ...values.spaceType.mechanicalData[mappedLibrarySourceArray][index],
    { isProjectSystem && (select ( // getting error at this line (compile errors)
        <Field
          name="airSystem.isEquipmentIncluded"
          component={AntdCheckboxAdapter}
          type="checkbox"
          label="Included"
          disabled={isReadOnly}
        />
    )),
    },
      id: (
        <Field
          name={name}
          component={AntdSelectSectionAdapter}
          isProjectSystem={isProjectSystem}
          section={section}
          disabled={isReadOnly}
          placeholder="Select source"
          render={sourceRender}
        />
      ),
    }));
    return (
      <div>
        <Table
          columns={tableColumns}
          dataSource={dataSource}
          rowKey="rowKey"
        />
      </div>
    );
  }}
</FieldArray>

);

我不确定上面的代码哪里做错了，isProjectSystem是传递给这个组件的 bool 变量

我正在使用 React JS 和最终表单适配器插件任何人都可以就此提出任何想法，我将非常感激。提前致谢

Answer 1

你可以这样做:

const dataSource = fields.map((name, index) => ({
  rowKey: index,
  ...values.spaceType.mechanicalData[mappedLibrarySourceArray][index],
  select: isProjectSystem ? (
    <Field
      name="airSystem.isEquipmentIncluded"
      component={AntdCheckboxAdapter}
      type="checkbox"
      label="Included"
      disabled={isReadOnly}
    />
  ) : null,
  id: (
    <Field
      name={name}
      component={AntdSelectSectionAdapter}
      isProjectSystem={isProjectSystem}
      section={section}
      disabled={isReadOnly}
      placeholder="Select source"
      render={sourceRender}
    />
  ),
}));

无论如何，都会有 select 属性。或者，您可以更改 map 以有条件地在之后添加该属性。

const dataSource = fields.map((name, index) => {
  const output = {
    rowKey: index,
    ...values.spaceType.mechanicalData[mappedLibrarySourceArray][index],
    id: (
      <Field
        name={name}
        component={AntdSelectSectionAdapter}
        isProjectSystem={isProjectSystem}
        section={section}
        disabled={isReadOnly}
        placeholder="Select source"
        render={sourceRender}
      />
    ),
  };

  if (isProjectSystem) {
    output.select = (
      <Field
        name="airSystem.isEquipmentIncluded"
        component={AntdCheckboxAdapter}
        type="checkbox"
        label="Included"
        disabled={isReadOnly}
      />
    );
  }

  return output;
});