[英]trying to render fields on condition based inside FieldArray react JS
我正在尝试根据传递给组件的条件渲染字段,如下所示
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 任何人都可以提出任何关于此的想法,将不胜感激。 提前致谢
你可以这样做:
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;
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.