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

Question

我正在关注this 文档以使用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

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

这是一个简单的例子：

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