javascript - 尝试根据 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是布尔变量传递给了这个组件

我正在使用带有最终表单适配器插件的 React JS 任何人都可以提出任何关于此的想法，将不胜感激。提前致谢

标签： javascriptreactjsreact-final-formfinal-formreact-final-form-arrays

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;
});