admin-on-rest - 如何使用 Admin On Rest 将动态过滤器传递给 List 组件？

Question

我正在使用Show显示学生页面。在学生页面上，我想显示许多课程的列表，并且列表必须分页。

    export const StudentShow = (props) => (
        <Show title='Student' {...props}>
            <SimpleShowLayout>
                // correctly displays the student ID
                <TextField label='id' source='id' />
                <ReferenceManyField
                    label='Courses'
                    target='course'
                    id='student.id'
                    reference='courses'>
                    // how can I properly pass the student ID to List?
                    <List {...props} filter={{ student: student.id }}>
                        <Datagrid>
                            <TextField source='code' />
                        </Datagrid>
                    </List>
                </ReferenceManyField>
            </SimpleShowLayout>
        </Show>
    );

正确地对ReferenceManyField进行 API 调用/courses/?student=<studentId>，但List只是对/courses/. 我无法将学生 ID 传递给List组件。

如何将学生 ID 传递给List组件？

Answer 1

您可以在登录时将 StudentId 保存在 localStorage 中，并使用它来创建过滤器。没有测试过这个。但我认为它应该工作。

此外，我不确定 List 是否应该作为子项传递给 ReferenceManyField 的组件。它应该是一个迭代器组件，例如 DataGrid 或 SingleFieldList。

https://marmelab.com/admin-on-rest/Fields.html#referencemanyfield

Answer 2

我能够通过创建另一个组件来访问父记录。

const Courses = props => (
    let studentRecord = props.record;

    <div className='field'>
        <ReferenceManyField
            target='course'
            reference='courses'>
            <List {...props} filter={{ student: studentRecord.id }}>
                <Datagrid>
                    <TextField label='id' source='id' />
                </Datagrid>
            </List>
        </ReferenceManyField>
    </div>
);

export const StudentShow = (props) => (
    <Show title='Student' {...props}>
        <SimpleShowLayout>
            // correctly displays the student ID
            <TextField label='id' source='id' />
            <Courses {...props} />
        </SimpleShowLayout>
    </Show>
);