如何在react admin中调用嵌套ArrayInput/FormDataConsumer中的getSource

Question

我遵循本文档使用FormDataConsumer来显示/隐藏输入。但我有一个嵌套的ArrayInput/FormDataConsumer，如下所示：

export const MyClassCreate = ({ permissions, ...props }) => (
<Create {...props}>
<TabbedForm>
<FormTab label="summary">
<SelectInput source="className" choices={choices} optionText="choiceType"
optionValue="className"disableValue="not_available"
/>
<TextInput source="field1" />
<NumberInput source="field2" />
<FormDataConsumer>
{({ formData, ...rest }) =>
formData.className === "my.package.MyClass2" && (
<TextInput source="field3" {...rest} />
)
}
</FormDataConsumer>
<FormDataConsumer>
{({ formData, ...rest }) =>
formData.className === "my.package.MyClass1" && (
<Fragment>
<NumberInput source="field4" {...rest} />
<ArrayInput source="arrayField1">
<SimpleFormIterator>
<SelectInput source="field5.subField6" choices={choices} 
optionText="choiceType"
optionValue="className" 
disableValue="not_available"
/>
<TextInput source="field5.subField7" />
<FormDataConsumer>
{({ formData, scopedFormData, getSource, ...rest }) =>
scopedFormData.field5 &&
scopedFormData.field5.subField8 &&
scopedFormData.field5.subField8 ===
"my.package.MyClass3" && (
<NumberInput
source={getSource("field5.subField9")}
{...rest}
/>
)
}
</FormDataConsumer>
<FormDataConsumer>
{({ formData, scopedFormData, getSource, ...rest }) =>
scopedFormData.field5 &&
scopedFormData.field5.subField8 &&
scopedFormData.field5.subField8 ===
"my.package.MyClass4" && (
<ArrayInput source={getSource("reward.rewards")}>
<SimpleFormIterator>
<SelectInput source={getSource("problemField1")} choices={choices}
optionText="choiceType" optionValue="className"
disableValue="not_available"
/>
<TextInput source={getSource("problemField2")} />
<FormDataConsumer>
{({
formData,
scopedFormData,
getSource,
...rest
}) =>
scopedFormData.field8 &&
scopedFormData.field8 ===
"my.package.MyClass5" && (
<NumberInput
source={getSource("field8")}
{...rest}
/>
)
}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
)
}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
</Fragment>
)
}
</FormDataConsumer>
</FormTab>
<FormTab label="campaign">
<DateInput source="startTime" parse={dateParser} />
<DateInput source="expirationTime" parse={dateParser} />
</FormTab>
</TabbedForm>
</Create>
);

我的问题是，在problemField1和problemField2中，尽管我像预期的那样调用getSource，但源的实际分辨率仍然使用引用一级源解引用。有没有办法告诉我的嵌套/内部getSource指向正确的"级别"？

Answer 1

我已经能够使用react-admin创建嵌套ArrayInput

下面是一个简单的例子：

const NavBarInput = ({ source }) => (
<Box>
<ArrayInput source={source}>
<SimpleFormIterator>
<TextInput source="title" />
<FormDataConsumer>
{({ getSource }) => (
<NavBarInput source={getSource?.('items')} />
)}
</FormDataConsumer>
</SimpleFormIterator>
</ArrayInput>
</Box>
);