嘗試根據 FieldArray 內部的條件渲染字段反應 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是傳遞給這個組件的 boolean 變量

我正在使用帶有最終表單適配器插件的 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;
});