试图在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是传递给这个组件的布尔变量

我正在使用带有最终表单适配器插件的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}
/>
),
}));

不管怎样都将具有CCD_ 2属性。或者，您可以更改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;
});